/* ==========================================================================
   Gusion — Design Tokens
   "Veri görür, biz tutturuz."
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* === Type === */
  --font-display: 'Source Serif 4', 'Newsreader', Georgia, serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular 1.25, but tightened for UI) */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;
  --text-7xl: 84px;
  --text-8xl: 112px;

  /* === Spacing (4px base) === */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* === Radii === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* === Motion === */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-vision: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Density === */
  --row-h: 64px;
  --row-h-compact: 52px;
  --gap-stack: 12px;
}

/* ==========================================================================
   DARK THEME — default
   "Maç saati = akşam = ürünün ana kullanım anı."
   ========================================================================== */
[data-theme="dark"], :root {
  /* Surfaces — newspaper at night, not crypto-glow */
  --bg: #0b0b0d;            /* page */
  --bg-alt: #111114;        /* alt section */
  --surface-1: #15161a;     /* card resting */
  --surface-2: #1c1d22;     /* card raised */
  --surface-3: #24262c;     /* row hover */
  --surface-inset: #0f1013; /* inset wells */

  /* Borders */
  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.10);
  --border-3: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);

  /* Text — WCAG AA tuned (fg-muted ≥4.5:1, fg-dim ≥3:1 large only) */
  --fg: #ECEAE3;            /* paper-warm white */
  --fg-strong: #FAF8F2;
  --fg-muted: #B5B3AC;       /* lifted from #9C9A93 for WCAG AA on bg #0b0b0d */
  --fg-dim: #8C8B85;         /* lifted from #6B6A65; use only ≥18px or ≥14px bold */
  --fg-faint: #5A5955;

  /* Accent — terrakota / amber. Survives both themes, not casino-neon. */
  --accent: #D97706;
  --accent-bright: #F59E0B;
  --accent-soft: #C2410C;
  --accent-tint: rgba(217, 119, 6, 0.14);
  --accent-tint-strong: rgba(217, 119, 6, 0.22);
  --on-accent: #1a0f02;

  /* Semantics — restrained, paper-printed */
  --success: #4F9D69;
  --success-tint: rgba(79, 157, 105, 0.16);
  --warning: #D4A53C;
  --warning-tint: rgba(212, 165, 60, 0.14);
  --danger: #C2554F;
  --danger-tint: rgba(194, 85, 79, 0.16);
  --info: #6B8AAE;
  --info-tint: rgba(107, 138, 174, 0.16);

  /* Live — pulses */
  --live: #E26B5C;
  --live-tint: rgba(226, 107, 92, 0.18);

  /* Confidence ladder — 5 steps */
  --conf-1: #6B6A65;        /* low */
  --conf-2: #8C8377;        /* mid-low */
  --conf-3: #B8924A;        /* mid */
  --conf-4: #D97706;        /* high */
  --conf-5: #F59E0B;        /* very-high */

  /* Form result */
  --form-w: #4F9D69;
  --form-d: #8C8377;
  --form-l: #C2554F;

  /* Shadows — calm, not glow */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.45);

  /* Brand mark stroke */
  --mark: var(--fg-strong);

  /* === RGB triplets — for Tailwind opacity utilities (bg-accent/80) === */
  --rgb-bg: 11 11 13;
  --rgb-bg-alt: 17 17 20;
  --rgb-surface-1: 21 22 26;
  --rgb-surface-2: 28 29 34;
  --rgb-surface-3: 36 38 44;
  --rgb-surface-inset: 15 16 19;
  --rgb-fg: 236 234 227;
  --rgb-fg-strong: 250 248 242;
  --rgb-fg-muted: 181 179 172;
  --rgb-fg-dim: 140 139 133;
  --rgb-fg-faint: 90 89 85;
  --rgb-accent: 217 119 6;
  --rgb-accent-bright: 245 158 11;
  --rgb-accent-soft: 194 65 12;
  --rgb-on-accent: 26 15 2;
  --rgb-success: 79 157 105;
  --rgb-warning: 212 165 60;
  --rgb-danger: 194 85 79;
  --rgb-info: 107 138 174;
  --rgb-live: 226 107 92;
  --rgb-conf-1: 107 106 101;
  --rgb-conf-2: 140 131 119;
  --rgb-conf-3: 184 146 74;
  --rgb-conf-4: 217 119 6;
  --rgb-conf-5: 245 158 11;
  --rgb-form-w: 79 157 105;
  --rgb-form-d: 140 131 119;
  --rgb-form-l: 194 85 79;
  --rgb-border: 255 255 255;  /* alpha applied via /value */
}

/* ==========================================================================
   LIGHT THEME — newspaper at noon
   ========================================================================== */
[data-theme="light"] {
  --bg: #F5F2EA;            /* warm newsprint */
  --bg-alt: #EDE8DC;
  --surface-1: #FBFAF5;
  --surface-2: #FFFFFF;
  --surface-3: #F0EBDF;
  --surface-inset: #E8E2D2;

  --border-1: rgba(28, 24, 14, 0.07);
  --border-2: rgba(28, 24, 14, 0.12);
  --border-3: rgba(28, 24, 14, 0.20);
  --border-strong: rgba(28, 24, 14, 0.40);

  --fg: #1B1812;
  --fg-strong: #0A0907;
  --fg-muted: #54503F;       /* darker than #5C5749 for WCAG AA on bg #F5F2EA */
  --fg-dim: #6F6B5C;         /* darker than #8B8676; large/bold text only */
  --fg-faint: #9A9483;

  --accent: #C2410C;
  --accent-bright: #D97706;
  --accent-soft: #9A2E04;
  --accent-tint: rgba(194, 65, 12, 0.10);
  --accent-tint-strong: rgba(194, 65, 12, 0.18);
  --on-accent: #FFF8E7;

  --success: #2E7148;
  --success-tint: rgba(46, 113, 72, 0.10);
  --warning: #946C0E;
  --warning-tint: rgba(148, 108, 14, 0.10);
  --danger: #9A302B;
  --danger-tint: rgba(154, 48, 43, 0.10);
  --info: #3F5D80;
  --info-tint: rgba(63, 93, 128, 0.10);

  --live: #B23A2A;
  --live-tint: rgba(178, 58, 42, 0.14);

  --conf-1: #8B8676;
  --conf-2: #A07F50;
  --conf-3: #B47C2A;
  --conf-4: #C2410C;
  --conf-5: #9A2E04;

  --form-w: #2E7148;
  --form-d: #8B8676;
  --form-l: #9A302B;

  --shadow-1: 0 1px 2px rgba(28, 24, 14, 0.06);
  --shadow-2: 0 4px 12px rgba(28, 24, 14, 0.08);
  --shadow-3: 0 12px 32px rgba(28, 24, 14, 0.12);

  --mark: var(--fg-strong);

  /* === RGB triplets — light theme === */
  --rgb-bg: 245 242 234;
  --rgb-bg-alt: 237 232 220;
  --rgb-surface-1: 251 250 245;
  --rgb-surface-2: 255 255 255;
  --rgb-surface-3: 240 235 223;
  --rgb-surface-inset: 232 226 210;
  --rgb-fg: 27 24 18;
  --rgb-fg-strong: 10 9 7;
  --rgb-fg-muted: 84 80 63;
  --rgb-fg-dim: 111 107 92;
  --rgb-fg-faint: 154 148 131;
  --rgb-accent: 194 65 12;
  --rgb-accent-bright: 217 119 6;
  --rgb-accent-soft: 154 46 4;
  --rgb-on-accent: 255 248 231;
  --rgb-success: 46 113 72;
  --rgb-warning: 148 108 14;
  --rgb-danger: 154 48 43;
  --rgb-info: 63 93 128;
  --rgb-live: 178 58 42;
  --rgb-conf-1: 139 134 118;
  --rgb-conf-2: 160 127 80;
  --rgb-conf-3: 180 124 42;
  --rgb-conf-4: 194 65 12;
  --rgb-conf-5: 154 46 4;
  --rgb-form-w: 46 113 72;
  --rgb-form-d: 139 134 118;
  --rgb-form-l: 154 48 43;
  --rgb-border: 28 24 14;
}

/* ==========================================================================
   LEGACY ALIAS LAYER — Mission Glass kalıntı isimler (geçiş döneminde)
   main.css ve eski c-* class'ları bu isimlere bağlı; yeni isme yönlendir.
   ========================================================================== */
:root, [data-theme="dark"] {
  /* Surface aliases */
  --rgb-bg-base: var(--rgb-bg);
  --rgb-bg-deep: var(--rgb-bg-alt);
  --rgb-bg-surface: var(--rgb-surface-1);
  --rgb-bg-elevated: var(--rgb-surface-2);

  /* Text aliases */
  --rgb-text-primary: var(--rgb-fg-strong);
  --rgb-text-secondary: var(--rgb-fg);
  --rgb-text-tertiary: var(--rgb-fg-muted);
  --rgb-text-muted: var(--rgb-fg-dim);
  --rgb-text-inverse: var(--rgb-on-accent);
  --rgb-text-disabled: var(--rgb-fg-faint);

  /* Accent aliases */
  --rgb-accent-hover: var(--rgb-accent-bright);
  --rgb-accent-deep: var(--rgb-accent-soft);
  --rgb-accent-fg: var(--rgb-on-accent);

  /* Confidence aliases */
  --rgb-confidence-high: var(--rgb-conf-5);
  --rgb-confidence-mid: var(--rgb-conf-3);
  --rgb-confidence-low: var(--rgb-conf-1);

  /* Border aliases (alpha applied where used) */
  --rgb-border-subtle: var(--rgb-border);
  --rgb-border-strong: var(--rgb-border);

  /* Semantic soft aliases */
  --rgb-success-soft: var(--rgb-success);
  --rgb-danger-soft: var(--rgb-danger);
  --rgb-warning-soft: var(--rgb-warning);

  /* Mission-Glass-only legacy vars (no-op in new design) */
  --shadow-glass: var(--shadow-2);
  --shadow-float: var(--shadow-3);
  --shadow-cyan: 0 0 0 0 transparent;
  --shadow-cyan-strong: 0 0 0 0 transparent;
  --shadow-soft: var(--shadow-1);
  --glow-cyan: 0 0 0 0 transparent;
  --glow-amber: 0 0 0 0 transparent;
  --glow-success: 0 0 0 0 transparent;
  --glow-danger: 0 0 0 0 transparent;
  --glass-blur: 12px;
  --glass-blur-sm: 6px;
  --hex-grid: none;
  --scanline: none;
  --ease-vision: var(--ease-out);
  --alpha-border-subtle: 0.06;
  --alpha-border-strong: 0.16;

  /* Eski main.css'in beklediği glass ekstra'lar */
  --glass-bg: rgb(var(--rgb-surface-1) / 0.7);
  --glass-bg-strong: rgb(var(--rgb-surface-2) / 0.85);
  --glass-saturate: 1.0;
  --glass-border: rgb(var(--rgb-border) / 0.10);
}

/* ==========================================================================
   Density toggle
   ========================================================================== */
[data-density="compact"] {
  --row-h: 52px;
  --gap-stack: 8px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent-tint-strong); color: var(--fg-strong); }

/* Tabular figures — non-negotiable */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
.serif-italic { font-family: var(--font-display); font-style: italic; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Live pulse — restrained */
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.94); }
}

@keyframes ring-pulse {
  0% { box-shadow: 0 0 0 0 var(--live-tint); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}