/* ============================================================================
   Contentrylab / ContentryOS — Design Tokens (Web)  v2
   ----------------------------------------------------------------------------
   Kaynak (renkler + cornerRadius): ContentrylabSwiftUI/Sources/DesignSystem/Theme.swift
   Renkler iOS sistem paletidir (değiştirilmedi). Tip ölçeği, ramp'lar, elevation,
   motion vb. web için tasarım sistemine eklenmiştir (Theme.swift'te yoktur).

   Mimari: iki katman
     1) PRIMITIVE  (ham palet + ramp'lar; doğrudan kullanma)
     2) SEMANTIC   (--color-*, --surface-* ... bileşenler bunları kullanır; temayla değişir)
   Tema: prefers-color-scheme (OTOMATIK) + [data-theme="light|dark"] (ZORLAMA).

   Erişilebilirlik: her vurgu rengi FILL ve TEXT olarak ikiye ayrılmıştır. Küçük metin
   (≤17px) için daima `*-text` varyantını kullan (WCAG AA ≥ 4.5:1 doğrulanmıştır).
   ============================================================================ */

:root {
  /* ===== 1) PRIMITIVES ===== */

  /* Blue (systemBlue 500 = #007AFF) */
  --blue-50:#EBF5FF; --blue-100:#D6EAFF; --blue-200:#A6D2FF; --blue-300:#6BB4FF;
  --blue-400:#339AFF; --blue-500:#007AFF; --blue-600:#0062D6; --blue-700:#004CA8;
  --blue-800:#003A80; --blue-900:#002A5E;
  --blue-ios-dark:#0A84FF;

  /* Indigo (systemIndigo 500 = #5856D6) */
  --indigo-50:#ECECFB; --indigo-100:#DAD9F7; --indigo-200:#B7B5EF; --indigo-300:#8F8DE4;
  --indigo-400:#6E6CDC; --indigo-500:#5856D6; --indigo-600:#4644B0; --indigo-700:#35338A;
  --indigo-800:#262566; --indigo-900:#1A1947;
  --indigo-ios-dark:#5E5CE6;

  /* Green (systemGreen 500 = #34C759) */
  --green-50:#E8F9ED; --green-100:#CFF3D8; --green-200:#A0E7B4; --green-300:#6DD98C;
  --green-400:#4ACF6D; --green-500:#34C759; --green-600:#28A347; --green-700:#1A7F37;
  --green-800:#136029; --green-900:#0C421C;
  --green-ios-dark:#30D158;

  /* Status primitives (iOS systemRed / systemOrange) */
  --red-500:#FF3B30;    --red-700:#D70015;   --red-ios-dark:#FF453A;
  --orange-500:#FF9500; --orange-700:#8A6D00; --orange-ios-dark:#FFD60A;

  /* Neutrals */
  --white:#FFFFFF; --black:#000000;
  --gray-50:#F2F2F7;  /* iOS systemGray6 */
  --gray-ios:#8E8E93; /* iOS systemGray  */
  --gray-text-light:#6D6D72;  /* AA secondary text on light */
  --gray-text-dark:#AEAEB2;   /* AA secondary text on dark  */
  --gray-900:#1C1C1E; --gray-850:#2C2C2E;

  /* ===== 2) SEMANTIC — LIGHT (varsayılan) ===== */

  /* Vurgu — FILL (ikon/büyük yüzey, UI 3:1) */
  --color-accent:#007AFF;
  --color-accent-secondary:#5856D6;
  --color-success:#34C759;
  --color-warning:#FF9500;
  --color-danger:#FF3B30;
  /* Vurgu — TEXT (küçük metin/link/chip; AA ≥4.5:1) */
  --color-accent-text:#0062CC;
  --color-success-text:#1A7F37;
  --color-warning-text:#8A6D00;
  --color-danger-text:#D70015;
  --color-info-text:#0062CC;

  /* Yüzeyler */
  --surface-base:#F2F2F7;      /* sayfa zemini */
  --surface:#FFFFFF;           /* kart */
  --surface-raised:#FFFFFF;    /* yükseltilmiş kart */
  --surface-sunken:#E9E9EE;

  /* Metin */
  --color-text-primary:#000000;
  --color-text-secondary:#6D6D72;   /* AA: 5.15:1 / #FFF, 4.61:1 / #F2F2F7 */
  --color-text-on-accent:#FFFFFF;

  /* Kenarlık / ayraç */
  --color-border:rgba(0,0,0,0.10);     /* kontrol kenarı (≥3:1 hedef) */
  --color-separator:rgba(0,0,0,0.06);  /* ince ayraç (dekoratif) */

  /* Etkileşim durumları (yüzey üstüne uygulanır) */
  --state-hover:rgba(0,0,0,0.04);
  --state-pressed:rgba(0,0,0,0.08);
  --state-selected:color-mix(in srgb, var(--color-accent) 12%, transparent);
  --accent-subtle:color-mix(in srgb, var(--color-accent) 14%, transparent);
  --focus-ring-color:#007AFF;
  --focus-ring:0 0 0 3px rgba(0,122,255,0.55);

  /* Gölgeler / elevation */
  --elevation-0:none;
  --elevation-1:0 1px 2px rgba(0,0,0,0.04);
  --elevation-2:0 4px 10px rgba(0,0,0,0.05);   /* kart */
  --elevation-3:0 8px 24px rgba(0,0,0,0.08);
  --elevation-4:0 16px 40px rgba(0,0,0,0.12);
  --shadow-card:var(--elevation-2);

  /* Gradyanlar */
  --gradient-brand:linear-gradient(135deg, #007AFF 0%, #3D6FEC 45%, #5856D6 100%);
  --gradient-primary:linear-gradient(135deg, #0062D6 0%, #5856D6 100%); /* btn: beyaz metin AA */
  --gradient-mesh:radial-gradient(120% 120% at 0% 0%, #007AFF 0%, transparent 55%),
                  radial-gradient(120% 120% at 100% 100%, #5856D6 0%, transparent 55%), #0A1840;

  /* Liquid Glass (web yaklaşımı; legibility için opaklık tabanı yükseltildi) */
  --glass-bg:rgba(255,255,255,0.78);
  --glass-bg-thin:rgba(255,255,255,0.62);
  --glass-border:rgba(255,255,255,0.55);
  --glass-highlight:rgba(255,255,255,0.70);   /* iç üst parlama */
  --glass-blur:blur(20px) saturate(180%);
  --glass-blur-thick:blur(30px) saturate(200%);
  --scrim:rgba(0,0,0,0.40);

  /* ===== ÖLÇEKLER (temadan bağımsız) ===== */

  /* Tipografi */
  --font-display:-apple-system, "SF Pro Display", system-ui, "Inter", sans-serif;
  --font-text:-apple-system, "SF Pro Text", system-ui, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans:var(--font-text); /* geriye dönük kısayol */

  --font-size-large-title:34px; --lh-large-title:41px; --ls-large-title:0.37px;
  --font-size-title:28px;       --lh-title:34px;       --ls-title:0.36px;
  --font-size-title2:22px;      --lh-title2:28px;      --ls-title2:0.35px;
  --font-size-title3:20px;      --lh-title3:25px;      --ls-title3:0.38px;
  --font-size-headline:17px;    --lh-headline:22px;    --ls-headline:-0.43px;
  --font-size-body:17px;        --lh-body:22px;        --ls-body:-0.43px;
  --font-size-subheadline:15px; --lh-subheadline:20px; --ls-subheadline:-0.24px;
  --font-size-footnote:13px;    --lh-footnote:18px;    --ls-footnote:-0.08px;
  --font-size-caption:12px;     --lh-caption:16px;     --ls-caption:0px;
  --font-size-caption2:11px;    --lh-caption2:13px;    --ls-caption2:0.06px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Boşluk (4pt grid) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px;

  /* Köşe */
  --radius-xs:8px; --radius-sm:12px; --radius:16px; --radius-lg:20px;
  --radius-xl:28px; --radius-pill:999px;

  /* Kenarlık genişliği / opaklık */
  --border-hairline:1px; --border-thick:2px;
  --opacity-disabled:0.4; --opacity-muted:0.6; --opacity-subtle:0.08;

  /* İkon boyutları */
  --icon-sm:17px; --icon-md:20px; --icon-lg:24px;

  /* Z-index */
  --z-base:0; --z-dropdown:1000; --z-sticky:1100; --z-overlay:1200;
  --z-modal:1300; --z-toast:1400; --z-tooltip:1500;

  /* Hareket */
  --duration-fast:150ms; --duration-base:250ms; --duration-slow:400ms;
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-emphasized:cubic-bezier(0.2,0,0,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* Düzen */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
  --container-max:1120px; --container-pad:24px;

  color-scheme: light dark;
}

/* ===== 2b) SEMANTIC — DARK =====
   Düz CSS'te bir selektör + @media virgülle birleşemez; bu yüzden dark değerler
   iki kez yazılır: (a) OS-dark (zorla light değilse), (b) [data-theme="dark"] zorlaması. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-accent:#0A84FF; --color-accent-secondary:#5E5CE6; --color-success:#30D158;
    --color-warning:#FF9F0A; --color-danger:#FF453A;
    --color-accent-text:#0A84FF; --color-success-text:#30D158; --color-warning-text:#FFD60A;
    --color-danger-text:#FF453A; --color-info-text:#0A84FF;
    --surface-base:#000000; --surface:#1C1C1E; --surface-raised:#2C2C2E; --surface-sunken:#0A0A0B;
    --color-text-primary:#FFFFFF; --color-text-secondary:#AEAEB2; --color-text-on-accent:#FFFFFF;
    --color-border:rgba(255,255,255,0.16); --color-separator:rgba(255,255,255,0.10);
    --state-hover:rgba(255,255,255,0.06); --state-pressed:rgba(255,255,255,0.12);
    --focus-ring-color:#0A84FF; --focus-ring:0 0 0 3px rgba(10,132,255,0.65);
    --elevation-1:0 1px 2px rgba(0,0,0,0.5); --elevation-2:0 4px 12px rgba(0,0,0,0.5);
    --elevation-3:0 8px 24px rgba(0,0,0,0.55); --elevation-4:0 16px 40px rgba(0,0,0,0.6);
    --shadow-card:var(--elevation-2);
    --glass-bg:rgba(28,28,30,0.72); --glass-bg-thin:rgba(28,28,30,0.55);
    --glass-border:rgba(255,255,255,0.18); --glass-highlight:rgba(255,255,255,0.15);
  }
}
:root[data-theme="dark"] {
  --color-accent:#0A84FF; --color-accent-secondary:#5E5CE6; --color-success:#30D158;
  --color-warning:#FF9F0A; --color-danger:#FF453A;
  --color-accent-text:#0A84FF; --color-success-text:#30D158; --color-warning-text:#FFD60A;
  --color-danger-text:#FF453A; --color-info-text:#0A84FF;
  --surface-base:#000000; --surface:#1C1C1E; --surface-raised:#2C2C2E; --surface-sunken:#0A0A0B;
  --color-text-primary:#FFFFFF; --color-text-secondary:#AEAEB2; --color-text-on-accent:#FFFFFF;
  --color-border:rgba(255,255,255,0.16); --color-separator:rgba(255,255,255,0.10);
  --state-hover:rgba(255,255,255,0.06); --state-pressed:rgba(255,255,255,0.12);
  --focus-ring-color:#0A84FF; --focus-ring:0 0 0 3px rgba(10,132,255,0.65);
  --elevation-1:0 1px 2px rgba(0,0,0,0.5); --elevation-2:0 4px 12px rgba(0,0,0,0.5);
  --elevation-3:0 8px 24px rgba(0,0,0,0.55); --elevation-4:0 16px 40px rgba(0,0,0,0.6);
  --shadow-card:var(--elevation-2);
  --glass-bg:rgba(28,28,30,0.72); --glass-bg-thin:rgba(28,28,30,0.55);
  --glass-border:rgba(255,255,255,0.18); --glass-highlight:rgba(255,255,255,0.15);
}

/* ============================================================================
   BİLEŞENLER  (yalnızca semantic token kullanır)
   ============================================================================ */

html, body { background: var(--surface-base); color: var(--color-text-primary);
  font-family: var(--font-text); -webkit-font-smoothing: antialiased; }

/* — Kart (içerik; opak, okunur) — */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
/* Koyu temada gölge siyah üstünde görünmez → ince kenarlıkla elevation ver. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { border:1px solid var(--color-separator); } }
:root[data-theme="dark"] .card { border:1px solid var(--color-separator); }

/* — Liquid Glass yüzey (kontrol/navigasyon katmanı) — */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--border-hairline) solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight),
              inset 0 -1px 1px rgba(0,0,0,0.04),
              var(--elevation-3);
}
.glass::before { /* üst kenar parlaması (specular) */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, var(--glass-highlight), transparent 42%); opacity:.6;
}

/* — Butonlar — ortak yerleşim + dört seviye + durumlar — */
.btn-primary,.btn-secondary,.btn-tertiary,.btn-destructive,.btn-glass {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:0 18px; border:none; border-radius:var(--radius-pill); cursor:pointer;
  font:var(--weight-semibold) var(--font-size-headline)/1 var(--font-text);
  transition:filter var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard),
             background var(--duration-fast); }
.btn-primary { background:var(--gradient-primary); color:var(--color-text-on-accent); }
.btn-secondary { background:var(--accent-subtle); color:var(--color-accent-text); }
.btn-tertiary { background:transparent; color:var(--color-accent-text); }
.btn-destructive { background:var(--color-danger); color:#fff; }
.btn-glass { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); color:var(--color-accent-text); }
.btn-primary:hover,.btn-destructive:hover { filter:brightness(1.06); }
.btn-primary:active,.btn-destructive:active,.btn-secondary:active,.btn-tertiary:active,.btn-glass:active { transform:scale(0.97); }
.btn-secondary:hover { background:color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-tertiary:hover { background:var(--state-hover); }
.btn-glass:hover { background:color-mix(in srgb, var(--glass-bg), #000 5%); }

/* — Chip / etiket — */
.chip { display:inline-flex; align-items:center; gap:4px; min-height:32px;
  background:var(--accent-subtle); color:var(--color-accent-text);
  border-radius:var(--radius-pill); padding:6px 12px;
  font:var(--weight-semibold) var(--font-size-caption)/1 var(--font-text); }
.chip-success { background:color-mix(in srgb, var(--color-success) 16%, transparent); color:var(--color-success-text); }
.chip-danger  { background:color-mix(in srgb, var(--color-danger) 16%, transparent); color:var(--color-danger-text); }
.chip-selected,.chip[aria-pressed="true"] { background:var(--color-accent); color:#fff; }

/* — Yüzen cam tab bar — */
.tabbar { display:inline-flex; align-items:center; gap:8px;
  background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur-thick);
  backdrop-filter:var(--glass-blur-thick); border:1px solid var(--glass-border);
  border-radius:var(--radius-pill); padding:8px 14px;
  box-shadow:inset 0 1px 0 var(--glass-highlight), var(--elevation-3); }

/* — Form / input — */
.input { width:100%; min-height:44px; padding:12px 14px; color:var(--color-text-primary);
  background:var(--surface); border:1px solid var(--color-border); border-radius:var(--radius-sm);
  font:var(--weight-regular) var(--font-size-body)/1.3 var(--font-text); }
.input::placeholder { color:var(--color-text-secondary); }
.input[aria-invalid="true"] { border-color:var(--color-danger); }
.label { display:block; color:var(--color-text-primary);
  font:var(--weight-semibold) var(--font-size-subheadline)/1.2 var(--font-text); }
.help { color:var(--color-text-secondary); font:var(--font-size-footnote)/1.3 var(--font-text); }
.help-error { color:var(--color-danger-text); }

/* — Bağlantı — */
a { color:var(--color-accent-text); text-decoration:underline; text-underline-offset:2px; }
a:hover { text-decoration-thickness:2px; }

/* — Odak (klavye) — herkes için görünür halka (WCAG 2.4.7) — */
:where(a,button,.btn-primary,.btn-secondary,.btn-tertiary,.btn-destructive,.btn-glass,.chip,.tab,input,select,textarea):focus-visible {
  outline:2px solid var(--focus-ring-color); outline-offset:2px; box-shadow:var(--focus-ring);
}
[disabled],.is-disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }

/* ============================================================================
   ERİŞİLEBİLİRLİK FALLBACK'LERİ
   ============================================================================ */
/* backdrop-filter yoksa cam → opak yüzey */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .glass,.btn-glass,.tabbar { background:var(--surface); border-color:var(--color-separator);
    -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* Şeffaflığı azalt */
@media (prefers-reduced-transparency: reduce) {
  .glass,.btn-glass,.tabbar { background:var(--surface); -webkit-backdrop-filter:none;
    backdrop-filter:none; border-color:var(--color-separator); }
  .glass::before { display:none; }
}
/* Hareketi azalt */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}