/* ============================================================
   DESIGN TOKENS
   Renk & tasarım dili: physioactive.ca (marka mavisi #559BBD, koyu teal)
   Tipografi/spacing/radius sistemi: uupm.cc
   ============================================================ */
:root{
  /* Marka (PhysioActive) */
  --brand-50:#F1F7FA;
  --brand-100:#DBEAF1;
  --brand-200:#BEDAE8;
  --brand-300:#93C1D8;
  --brand-400:#7FB6D1;
  --brand-500:#559BBD;   /* ana marka rengi */
  --brand-600:#458FB3;
  --brand-700:#2C6E8F;
  --brand-800:#1D3947;   /* koyu teal-lacivert */
  --brand-900:#132734;

  --brand:var(--brand-500);
  --brand-dark:var(--brand-700);

  /* Nötrler (uupm slate) */
  --ink:#0F172A;
  --ink-soft:#1E293B;
  --muted:#64748B;
  --muted-2:#94A3B8;
  --surface:#F8FAFC;
  --surface-2:#F1F5F9;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --white:#ffffff;
  --neutral-dark:#1C1C1E; /* mavi tonu olmayan nötr koyu zemin (footer, cta-band) */

  /* ---- Halka açık site paleti (premium/minimal sıcak nötr sistem) ----
     Yalnızca public_html/assets/css/{base,components,layout}.css içinde
     kullanılır; admin paneli kendi brand, ink, muted tonlarını korur. */
  --site-blue:#66A5C2;        /* marka vurgusu — buton, link, ikon, sayı rozeti */
  --site-blue-soft:#EAF3F7;   /* açık vurgu zemini */
  --site-blue-line:#CFE3EC;   /* açık kenarlık/gradyan tonu */
  --site-navy:#1D263B;        /* header zemini */
  --site-gold:#FFC052;        /* onay rozeti + "neden biz" ikon rengi */
  --site-ink:#20201E;         /* gövde/başlık metni — sıcak füme/charcoal */
  --site-ink-soft:#33322F;
  --site-muted:#6F706B;       /* ikincil metin */
  --site-surface:#F7F6F2;     /* ana zemin — kırık/sıcak beyaz */
  --site-border:#E7E5DF;      /* ince, düşük kontrastlı kenarlık */
  --site-border-strong:#D8D5CC;

  /* Aynı sistemin genel takma adları (spec: --color-*) */
  --color-background:var(--site-surface);
  --color-surface:#fff;
  --color-text:var(--site-ink);
  --color-text-muted:var(--site-muted);
  --color-border:var(--site-border);
  --color-primary:var(--site-blue);
  --color-primary-hover:#5896B4;

  /* Aksan */
  --wa:#25D366;
  --success:#0F9D58;
  --danger:#DC2626;

  /* ---- Veri görselleştirme paleti (doğrulanmış, dataviz metodolojisi) ----
     Kategorik sıra SABİTTİR, asla döngüye alınmaz. Marka mavisi düşük kroma
     nedeniyle grafik serisi olarak geçmiyor (bkz. validate_palette.js); bu
     yüzden ayrı, kontrastı yüksek bir grafik paleti kullanılır. */
  --viz-cat-1:#2a78d6; /* mavi   */
  --viz-cat-2:#eb6834; /* turuncu */
  --viz-cat-3:#1baf7a; /* deniz yeşili */
  --viz-cat-4:#eda100; /* sarı   */
  --viz-cat-5:#e87ba4; /* pembe  */
  --viz-cat-6:#008300; /* yeşil  */
  --viz-cat-7:#4a3aa7; /* mor    */
  --viz-cat-8:#e34948; /* kırmızı */

  --viz-status-good:#0ca30c;
  --viz-status-warning:#d97706;
  --viz-status-serious:#ec835a;
  --viz-status-critical:#d03b3b;

  --viz-grid:#e1e0d9;
  --viz-axis:#94a3b8;

  /* Tipografi */
  --font-head:"Space Grotesk","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-eyebrow:.8125rem;
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.05rem,1rem + .3vw,1.25rem);
  --fs-h3:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --fs-h2:clamp(2rem,1.55rem + 1.7vw,3.5rem);      /* bölüm başlıkları: ~32–56px */
  --fs-h1:clamp(2.2rem,1.5rem + 2.7vw,4rem);        /* iç sayfa hero: ~35–64px */
  --fs-display:clamp(2.4rem,1.6rem + 3.2vw,5rem);   /* anasayfa hero: ~38–80px */

  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh-body:1.65;

  /* Konteyner & spacing */
  --container:1200px;
  --container-narrow:760px;
  --gutter:clamp(20px,4vw,32px);

  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;

  /* Radius */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-pill:999px;

  /* Gölge (uupm yumuşak) */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px -1px rgba(15,23,42,.08);
  --shadow-md:0 8px 20px -8px rgba(15,23,42,.14);
  --shadow-lg:0 24px 48px -24px rgba(29,57,71,.35);
  --shadow-brand:0 20px 40px -22px rgba(102,165,194,.65);

  /* Geçiş */
  --t-fast:.16s ease;
  --t:.22s cubic-bezier(.4,0,.2,1);

  --header-h:92px;
}

:root[data-theme="dark"]{
  --ink:#F5F7FA;
  --ink-soft:#DDE5EC;
  --muted:#AEB8C2;
  --muted-2:#7F8C98;
  --site-blue:#7BB8D2;
  --site-blue-soft:#183240;
  --site-blue-line:#31566A;
  --site-navy:#101923;
  --site-gold:#EFB84F;
  --site-ink:#F5F7FA;
  --site-ink-soft:#DDE5EC;
  --site-muted:#AEB8C2;
  --site-surface:#11171D;
  --site-border:#28333D;
  --site-border-strong:#3B4854;
  --color-background:#11171D;
  --color-surface:#17212A;
  --color-text:#F5F7FA;
  --color-text-muted:#AEB8C2;
  --color-border:#28333D;
  --neutral-dark:#0C1117;
  --surface:#151D25;
  --surface-2:#1C2630;
  --line:#28333D;
  --line-strong:#3B4854;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 14px 28px -18px rgba(0,0,0,.75);
  --shadow-lg:0 28px 60px -30px rgba(0,0,0,.85);
  --shadow-brand:0 20px 42px -26px rgba(123,184,210,.62);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5F7FA;
    --ink-soft:#DDE5EC;
    --muted:#AEB8C2;
    --muted-2:#7F8C98;
    --site-blue:#7BB8D2;
    --site-blue-soft:#183240;
    --site-blue-line:#31566A;
    --site-navy:#101923;
    --site-gold:#EFB84F;
    --site-ink:#F5F7FA;
    --site-ink-soft:#DDE5EC;
    --site-muted:#AEB8C2;
    --site-surface:#11171D;
    --site-border:#28333D;
    --site-border-strong:#3B4854;
    --color-background:#11171D;
    --color-surface:#17212A;
    --color-text:#F5F7FA;
    --color-text-muted:#AEB8C2;
    --color-border:#28333D;
    --neutral-dark:#0C1117;
    --surface:#151D25;
    --surface-2:#1C2630;
    --line:#28333D;
    --line-strong:#3B4854;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 2px 8px rgba(0,0,0,.25);
    --shadow-md:0 14px 28px -18px rgba(0,0,0,.75);
    --shadow-lg:0 28px 60px -30px rgba(0,0,0,.85);
    --shadow-brand:0 20px 42px -26px rgba(123,184,210,.62);
  }
}