/* =============================================================
   Best Randevu — design tokens
   Yön B "Kartela" · v0.2 (Aşama 2)
   Açık tema :root üzerinde; koyu tema aynı tokenları yeniden tanımlar.
   Bileşenler yalnızca bu tokenları kullanır, sabit renk yazmaz.
   ============================================================= */

:root,
.theme-light {   /* .theme-light: müşteriye dönük salon sayfaları her zaman açık temada kalır */
  color-scheme: light;

  /* ---- Yüzeyler ---- */
  --c-page: #FBF9F8;        /* panel arka planı */
  --c-base: #FFFFFF;        /* kart, form, modal */
  --c-stone: #F5F1F0;       /* dolu alan: input, ikincil buton, gün kutusu */
  --c-stone-2: #ECE5E3;     /* stone hover */
  --c-line: #E7E0DE;        /* ayraç, kart kenarı */
  --c-line-strong: #D3C8C5; /* input kenarı, tablo başlığı */
  --c-ink: #2A1C19;         /* ana metin (espresso) */
  --c-ink-2: #4A3935;       /* ikincil metin, soluk zemin üstünde metin */
  --c-muted: #74625E;       /* açıklama, etiket (stone üstünde 5.1:1) */
  --c-faint: #B5A9A6;       /* yalnızca pasif ve dekoratif */
  --c-scrim: rgba(42, 28, 25, .45);

  /* ---- Marka (platform) ---- */
  --c-brand: #C21F66;       /* fuşya — beyaz metinle 5.7:1 */
  --c-brand-hover: #A3164F;
  --c-brand-press: #8A1242;
  --c-brand-soft: #FCE6EF;
  --c-brand-ink: #A3164F;   /* beyaz üstünde link/metin — 7.5:1 */
  --c-on-brand: #FFFFFF;

  /* ---- Anlamsal ---- */
  --c-ok: #1E7A4E;   --c-ok-soft: #E3F3EA;
  --c-warn: #8F5600; --c-warn-soft: #FFF0D4; --c-warn-line: #D8931C;
  --c-err: #B42318;  --c-err-soft: #FDE7E4;

  /* ---- Uzman kartelası (takvim sütunu ve randevu kartı) ----
     -fill: gelecek randevu · -on: fill üstünde metin · -pale: geçmiş randevu */
  --s1: #B4462E; --s1-on: #FFFFFF; --s1-pale: #F5E1DB;  /* Kızıl */
  --s2: #4B2F27; --s2-on: #FFFFFF; --s2-pale: #EAE1DE;  /* Çikolata */
  --s3: #E3B066; --s3-on: #2A1C19; --s3-pale: #FAEEDB;  /* Bal */
  --s4: #6B2D5C; --s4-on: #FFFFFF; --s4-pale: #EFE0EB;  /* Mürdüm */
  --s5: #2F3B55; --s5-on: #FFFFFF; --s5-pale: #E1E5EE;  /* Gece mavisi */
  --s6: #766A60; --s6-on: #FFFFFF; --s6-pale: #ECE8E4;  /* Küllü kahve */
  --s7: #D9CCB4; --s7-on: #2A1C19; --s7-pale: #F6F1E8;  /* Platin */
  --s8: #E49AAE; --s8-on: #2A1C19; --s8-pale: #FBEAEE;  /* Pudra */

  /* ---- Salon teması (müşteri sayfaları) ----
     Her salon bu dört değeri kendi rengine göre ezer. */
  --salon-accent: #8E2C48;
  --salon-on-accent: #FFFFFF;
  --salon-accent-ink: #8E2C48;   /* beyaz üstünde metin/link, en az 4.5:1 */
  --salon-accent-soft: #F6E5EA;

  /* ---- Tipografi ----
     Tek aile: Archivo (wdth 62–125). Başlık ve saatler dar, gövde normal. */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;   /* gövde */
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;
  --fs-6xl: 64px;
  --wdth-display: 62%;  /* ekran başlıkları, gün, büyük saat */
  --wdth-title: 75%;    /* kart başlıkları, uzman adı */
  --wdth-body: 100%;

  /* ---- Ölçü ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
  --r-xs: 6px;    /* rozet, küçük etiket */
  --r-sm: 8px;    /* takvim kartı, chip */
  --r-md: 10px;   /* buton, input */
  --r-lg: 14px;   /* kart, gün kutusu */
  --r-xl: 20px;   /* alttan açılan panel, modal */
  --r-pill: 999px;
  --tap: 44px;    /* en küçük dokunma alanı */

  --sh-1: 0 1px 2px rgba(42, 28, 25, .10);
  --sh-2: 0 12px 32px -12px rgba(42, 28, 25, .30);
  --sh-3: 0 24px 60px -20px rgba(42, 28, 25, .40);

  --dur: .16s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Koyu tema ----
   Sistem tercihi (data-theme yoksa) ve açık seçim (data-theme="dark") için aynı değerler. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-page: #120E0D; --c-base: #1A1413; --c-stone: #251D1B; --c-stone-2: #2F2522;
    --c-line: #332926; --c-line-strong: #463935;
    --c-ink: #F3ECEA; --c-ink-2: #D9CCC8; --c-muted: #B3A29E; --c-faint: #6E605C;
    --c-scrim: rgba(0, 0, 0, .6);
    --c-brand: #EC4B8E; --c-brand-hover: #F26CA3; --c-brand-press: #D93A7C;
    --c-brand-soft: #3A1626; --c-brand-ink: #F26CA3; --c-on-brand: #1A0B11;
    --c-ok: #5BC48D; --c-ok-soft: #173325;
    --c-warn: #F0B450; --c-warn-soft: #3A2A10; --c-warn-line: #C98A1E;
    --c-err: #FF7A6B; --c-err-soft: #3D1814;
    --s1-pale: #3A221C; --s2-pale: #2E2320; --s3-pale: #3A2E1B; --s4-pale: #33202E;
    --s5-pale: #202634; --s6-pale: #2C2723; --s7-pale: #34302A; --s8-pale: #3A2429;
    --s2: #6A4539; --s5: #43537A;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 12px 32px -12px rgba(0, 0, 0, .7);
    --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-page: #120E0D; --c-base: #1A1413; --c-stone: #251D1B; --c-stone-2: #2F2522;
  --c-line: #332926; --c-line-strong: #463935;
  --c-ink: #F3ECEA; --c-ink-2: #D9CCC8; --c-muted: #B3A29E; --c-faint: #6E605C;
  --c-scrim: rgba(0, 0, 0, .6);
  --c-brand: #EC4B8E; --c-brand-hover: #F26CA3; --c-brand-press: #D93A7C;
  --c-brand-soft: #3A1626; --c-brand-ink: #F26CA3; --c-on-brand: #1A0B11;
  --c-ok: #5BC48D; --c-ok-soft: #173325;
  --c-warn: #F0B450; --c-warn-soft: #3A2A10; --c-warn-line: #C98A1E;
  --c-err: #FF7A6B; --c-err-soft: #3D1814;
  --s1-pale: #3A221C; --s2-pale: #2E2320; --s3-pale: #3A2E1B; --s4-pale: #33202E;
  --s5-pale: #202634; --s6-pale: #2C2723; --s7-pale: #34302A; --s8-pale: #3A2429;
  --s2: #6A4539; --s5: #43537A;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 12px 32px -12px rgba(0, 0, 0, .7);
  --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
}