/* ============================================
   EUAI HOUSE — BRAND TOKENS
   ============================================
   brandbook.html'den çıkarılmış tek referans dosya.
   Tüm siteye `<link>` veya `@import` ile bağlan.
   ============================================ */

:root {
  /* -----------------------------------------
     1. PRIMARY PALETTE
     ----------------------------------------- */
  --ink: #0A0E14;            /* mavi undertone'lu siyah (HSL 216°) */
  --paper: #F5F2EC;          /* sıcak ochre tonlu beyaz — Istanbul ışığı */
  --phosphor: #C6FF3D;       /* terminal yeşili — MAX %8 KULLANIM */

  /* -----------------------------------------
     2. NEUTRAL SCALE (Fibonacci Lightness)
     ----------------------------------------- */
  --ink-13: #161C26;         /* L:13 — elevated surface */
  --ink-21: #242C3A;         /* L:21 — divider, subtle border */
  --ink-34: #3D4A5C;         /* L:34 — strong border */
  --ink-55: #6C7A8F;         /* L:55 — muted text on dark */
  --ink-89: #AFB8C6;         /* L:73 — secondary text on dark */
  --paper-89: #DDE1E8;       /* L:89 — subtle paper tint */
  --paper-94: #E8EBEF;       /* L:94 — near-white paper */

  /* -----------------------------------------
     3. SIGNAL COLORS — SYSTEM STATUS ONLY
     ----------------------------------------- */
  /* Bu renkler ASLA dekoratif kullanılmaz. Sadece: */
  /* - başarı mesajı, hata, uyarı, bilgi (link) */
  --signal-positive: #00C88C;   /* success, confirmation, live indicator */
  --signal-warning: #FFAB0B;    /* warning, caution */
  --signal-critical: #E8412E;   /* error, destructive action */
  --signal-info: #4B8AE6;       /* information, link (interactive only) */

  /* -----------------------------------------
     4. TYPOGRAPHY
     ----------------------------------------- */
  --font-display: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-body: 'Geist Sans', 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* -----------------------------------------
     5. GOLDEN RATIO
     ----------------------------------------- */
  --phi: 1.618033988749;
  --phi-inverse: 0.618033988749;

  /* -----------------------------------------
     6. FIBONACCI SPACING
     ----------------------------------------- */
  /* Kullanılabilir değerler. Rastgele px YOK. */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-8: 8px;
  --space-13: 13px;
  --space-21: 21px;
  --space-34: 34px;
  --space-55: 55px;
  --space-89: 89px;
  --space-144: 144px;

  /* -----------------------------------------
     7. φ-MODULAR TYPE SCALE
     ----------------------------------------- */
  /* Base: 13px, her step φ ≈ 1.618 katı */
  --text-xs: 13px;      /* caption, meta */
  --text-sm: 16px;      /* UI text, small body */
  --text-base: 18px;    /* body (web) */
  --text-md: 21px;      /* large body, lead */
  --text-lg: 28px;      /* h4 */
  --text-xl: 34px;      /* h3 */
  --text-2xl: 55px;     /* h2 */
  --text-3xl: 89px;     /* h1, hero */

  /* -----------------------------------------
     8. LINE HEIGHT
     ----------------------------------------- */
  --lh-tight: 1.05;         /* hero headings */
  --lh-display: 1.236;      /* h1-h3 */
  --lh-body: 1.618;         /* body text, altın oran */

  /* -----------------------------------------
     9. LETTER SPACING
     ----------------------------------------- */
  --ls-display: -0.013em;    /* h2-h4 */
  --ls-hero: -0.02em;        /* h1, büyük başlık */
  --ls-label: 0.144em;       /* UPPERCASE label'lar (0.144 ≈ phi * 0.089) */
  --ls-caps: 0.089em;        /* UPPERCASE body */

  /* -----------------------------------------
     10. EASING (Altın oran tabanlı)
     ----------------------------------------- */
  --ease-phi: cubic-bezier(0.618, 0, 0.382, 1);
  --ease-in: cubic-bezier(0.618, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.382, 1);

  /* -----------------------------------------
     11. TRANSITION DURATIONS
     ----------------------------------------- */
  --dur-fast: 89ms;
  --dur-base: 144ms;
  --dur-slow: 233ms;

  /* -----------------------------------------
     12. BORDER RADIUS
     ----------------------------------------- */
  /* Sıfır radius tercih edilir (keskin geometri). */
  /* Yumuşatma gerekirse sadece bu değerler: */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 5px;

  /* -----------------------------------------
     13. Z-INDEX LAYERS
     ----------------------------------------- */
  --z-base: 0;
  --z-elevated: 8;
  --z-floating: 21;
  --z-nav: 34;
  --z-modal: 89;
}

/* ============================================
   LIGHT MODE THEME OVERRIDE
   ============================================
   data-theme="light" HTML tag'ine set edildiğinde
   tüm color token'ları light variant'lara geçer.
   Phosphor ve signal renkleri AA contrast için
   koyulaştırıldı (paper zemin üzerinde okunabilir).
   ============================================ */
[data-theme="light"] {
  /* Primary swap: ink ↔ paper */
  --ink: #F5F2EC;              /* bg = paper */
  --paper: #0A0E14;            /* text = ink */
  --phosphor: #3D7A1F;         /* WCAG AA — darker than #4A9929 to pass 4.5:1 on paper */

  /* Neutral scale (semantically inverted) */
  --ink-13: #E8E5DF;           /* elevated card — hafif koyu paper */
  --ink-21: #C5CCD6;           /* light divider */
  --ink-34: #8A95A3;           /* mid-tone border */
  --ink-55: #5A677A;           /* muted text on paper */
  --ink-89: #2A3242;           /* secondary text — dark */
  --paper-89: #161C26;         /* inverted subtle tint */
  --paper-94: #0A0E14;         /* near-black (inverted) */

  /* Signal colors — darker variants for AA on paper bg.
     signal-positive #007A52 ve phosphor #3D7A1F user pre-onaylı fallback'ler. */
  --signal-positive: #007A52;
  --signal-warning: #AA5F00;   /* darker than #CC7A00 for AA on paper */
  --signal-critical: #B32E1E;
  --signal-info: #2E6ACA;
}

/* ============================================
   CODE BLOCK PINNING — always dark appearance
   ============================================
   `<pre>` blok'larında tüm color token'ları dark-mode değerlerine pin'li.
   Light mode'da da code snippets IDE-style dark kalır (daha okunabilir,
   syntax highlight contrast yüksek). Scoped CSS variables outer theme'i
   override eder, bütün var() referansları bu değerleri alır.
   ============================================ */
pre {
  --ink: #0A0E14;
  --paper: #F5F2EC;
  --phosphor: #C6FF3D;
  --ink-13: #161C26;
  --ink-21: #242C3A;
  --ink-34: #3D4A5C;
  --ink-55: #6C7A8F;
  --ink-89: #AFB8C6;
  --signal-positive: #00C88C;
  --signal-warning: #FFAB0B;
  --signal-critical: #E8412E;
  --signal-info: #4B8AE6;
  color: var(--paper);
}

/* ============================================
   BASE RESET (global)
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--paper);
  background: var(--ink);
}

/* ============================================
   TYPOGRAPHY DEFAULTS
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--paper);
}

h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: 600; }
h5 { font-size: var(--text-md); font-weight: 500; }
h6 { font-size: var(--text-sm); font-weight: 500; }

p {
  max-width: 610px;
  margin-bottom: var(--space-21);
  color: var(--ink-89);
}

code, pre, .mono {
  font-family: var(--font-display);
}

.label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--phosphor);
}

/* ============================================
   LINKS (signal-info zorunlu)
   ============================================ */
a {
  color: var(--signal-info);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-phi);
}
a:hover {
  color: var(--phosphor);
}
a:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 3px;
}

/* ============================================
   SELECTION
   ============================================ */
::selection {
  background: var(--phosphor);
  color: var(--ink);
}

/* ============================================
   NAV — theme-aware semi-transparent bg
   ============================================
   color-mix Chrome 111+ / Safari 16.2+ / Firefox 113+.
   Fallback: @supports ile solid bg.
   ============================================ */
header#nav {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@supports not (background: color-mix(in srgb, red, blue)) {
  header#nav { background: var(--ink); }
}