/* =============================================================
   Vapur Saatleri — tasarım token'ları
   Tek kaynak. Bileşen CSS'i renk/ölçü değerini doğrudan yazmaz,
   hep buradaki değişkenlerden okur.

   Palet: "Soğuk görsel" — gövde soğuk (#007AFF), başlık görseli
   duotone maviye çevrilerek uyum sağlanıyor.
   ============================================================= */

:root{
  /* --- tipografi --- */
  --f-ui:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num:"DM Mono", ui-monospace, "SF Mono", monospace;

  /* --- yüzeyler ve metin --- */
  --bg:#FFFFFF;        /* sayfa zemini */
  --surf:#F7F8FA;      /* kart / alan zemini */
  --ink:#040E1E;       /* birincil metin — nötr siyah değil, hafif lacivert */
  --mut:#666F76;       /* ikincil metin, etiketler */
  --line:#E3E7EA;      /* kenarlık, ayraç */

  /* --- marka --- */
  --acc:#007AFF;       /* dolgu, nokta, kenarlık, 20px+ sayı */
  --acc-text:#0064D6;  /* 16px altı mavi metin (kontrast için koyultulmuş) */
  --acc-soft:#EAF3FF;  /* mavi zemin */

  /* --- sefer durumları ---
     Her durumun İKİ tonu var:
       *-mark  → nokta, çentik, ikon gibi küçük renkli işaretler (canlı ton)
       (temel) → metin rengi (koyultulmuş, WCAG AA)
     Bunları karıştırma: canlı yeşil beyaz üstünde 2.3:1, yazıda okunmaz. */
  --past:#9AA3AA;        --past-bg:#F0F2F4;
  --soon:#C2620A;        --soon-mark:#F08A15;   --soon-bg:#FDF0DF;   --soon-br:#F3C48D;
  --future:#04875A;      --future-mark:#01BB77; --future-bg:#E1F6EE;

  /* --- biçim --- */
  --r-card:16px;
  --r-field:14px;
  --shadow:0 1px 2px rgba(4,14,30,.06), 0 10px 26px rgba(4,14,30,.08);

  /* --- başlık bandı (duotone) --- */
  --band-grad:linear-gradient(175deg,#062744 0%,#0A4F8C 52%,#1379CF 100%);
  --band-ink:#FFF6EC;
  --band-kicker:#9FCBEE;
  --band-meta:#DCEAF6;
  --seam-grad:linear-gradient(90deg,#062744,#007AFF 55%,#7CC0FF);
}

/* Koyu tema — sistem tercihi.
   :root:not([data-theme="light"]) sayesinde kullanıcının açık seçimi bunu ezer. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1119;
    --surf:#131D28;
    --ink:#EAF0F6;
    --mut:#8C97A1;
    --line:#232E39;

    --acc:#4DA2FF;      --acc-text:#4DA2FF;    --acc-soft:#0F1E2E;

    --past:#5F6B76;     --past-bg:#19222B;
    --soon:#F2A63E;     --soon-mark:#F2A63E;   --soon-bg:#2E2416;   --soon-br:#6B5226;
    --future:#22D399;   --future-mark:#22D399; --future-bg:#0F2C24;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
  }
}

/* Koyu tema — kullanıcının açık seçimi (html[data-theme="dark"]) */
:root[data-theme="dark"]{
  --bg:#0A1119;
  --surf:#131D28;
  --ink:#EAF0F6;
  --mut:#8C97A1;
  --line:#232E39;

  --acc:#4DA2FF;      --acc-text:#4DA2FF;    --acc-soft:#0F1E2E;

  --past:#5F6B76;     --past-bg:#19222B;
  --soon:#F2A63E;     --soon-mark:#F2A63E;   --soon-bg:#2E2416;   --soon-br:#6B5226;
  --future:#22D399;   --future-mark:#22D399; --future-bg:#0F2C24;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
}