/* ═══════════════════════════════════════════════════════════════════════════════
   ODDAK DİJİTAL AJANS — Design Tokens
   File: /assets/css/tokens.css
   Authority: Sprint 4 Design System — Part 2 (Design Tokens)
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── SURFACES ─────────────────────────────────────────────────────────────── */
  --bg:  #F8F6F1;   /* Parchment — default page background */
  --w:   #FFFFFF;   /* White — card / panel / nav surface */

  /* ─── TEXT ──────────────────────────────────────────────────────────────────── */
  --ink:  #141210;  /* Primary: H1–H4, labels, important body */
  --ink2: #3D3A35;  /* Body: paragraphs, descriptions, captions */
  --ink3: #8C8880;  /* Tertiary: meta, timestamps, placeholders */
  --ink4: #C4C0B8;  /* Disabled / muted */

  /* Invariant near-black — NEVER redefined in [data-theme="dark"] below.
     Use this (not --ink) for sections that must always render as a dark
     panel with white text regardless of site theme (Why ODDAK, CTA band,
     case-study headers, toast, cookie banner). --ink itself flips to a
     near-white value in dark mode, so using it as a background on an
     "always-dark" section would turn the background white while the
     hardcoded white text stayed white — invisible. */
  --ink-fixed: #141210;

  /* ─── BRAND RED ─────────────────────────────────────────────────────────────── */
  --r:  #FF3B1F;                   /* Primary accent — CTAs, active states, logo */
  --r2: rgba(255, 59, 31, 0.08);   /* Soft tint — nav active bg, pill bg */
  --r3: rgba(255, 59, 31, 0.15);   /* Medium tint — hover, focus rings */

  /* ─── ACCENT COLOURS ────────────────────────────────────────────────────────── */
  --y:  #FFCC00;   /* Yellow — hero underline, Why ODDAK accents */
  --g:  #00C97A;   /* Green — success, growth metrics */

  /* ─── SERVICE CATEGORY COLOURS ──────────────────────────────────────────────── */
  --p:  #6C4FF5;   /* Purple — SEO, E-posta/Otomasyon */
  --b:  #00AAEE;   /* Blue — Web & Yazılım */
  --pk: #F04E8C;   /* Pink — Sosyal Medya */
  --or: #FF7A00;   /* Orange — E-Ticaret, Sektörler */
  --tl: #00B5A0;   /* Teal — İçerik & Metin, Strateji */

  /* ─── BORDERS ───────────────────────────────────────────────────────────────── */
  --bdr:  rgba(20, 18, 16, 0.09);   /* Light — default card borders */
  --bdr2: rgba(20, 18, 16, 0.15);   /* Medium — inputs, hover borders */
  --bdr3: rgba(20, 18, 16, 0.22);   /* Strong — focus states, dividers */

  /* ─── SHADOWS ───────────────────────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(20, 18, 16, 0.06);
  --shadow:     0 8px 32px rgba(20, 18, 16, 0.08), 0 2px 8px rgba(20, 18, 16, 0.04);
  --shadow-lg:  0 24px 80px rgba(20, 18, 16, 0.14), 0 4px 16px rgba(20, 18, 16, 0.06);
  --shadow-r:   0 8px 28px rgba(255, 59, 31, 0.28);
  --shadow-r-lg: 0 10px 32px rgba(255, 59, 31, 0.28);
  --shadow-card-hover: 0 22px 56px rgba(0, 0, 0, 0.14);

  /* ─── TYPOGRAPHY FAMILIES ───────────────────────────────────────────────────── */
  --fd: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --fb: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fm: 'DM Mono', 'Fira Code', 'Courier New', monospace;

  /* ─── ANIMATION EASINGS ─────────────────────────────────────────────────────── */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);     /* Default: entrance / exit */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring: button / card bounce */

  /* ─── ANIMATION DURATIONS ───────────────────────────────────────────────────── */
  --dur-fast:    120ms;   /* Hover colour transitions */
  --dur-base:    200ms;   /* Standard button, nav hover */
  --dur-medium:  250ms;   /* Card hover */
  --dur-slow:    300ms;   /* Theme toggle, icon transitions */
  --dur-panel:   220ms;   /* Mega menu open/close */
  --dur-drawer:  380ms;   /* Mobile nav drawer */
  --dur-reveal:  600ms;   /* Scroll reveal */
  --dur-hero:    700ms;   /* Hero H1 slide-up */
  --dur-counter: 1800ms;  /* Animated number counters */

  /* ─── BORDER RADIUS ─────────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  18px;
  --radius-3xl:  20px;
  --radius-4xl:  22px;
  --radius-5xl:  24px;
  --radius-pill: 100px;

  /* ─── SPACING ───────────────────────────────────────────────────────────────── */
  --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-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;
  --space-30: 120px;

  /* ─── GRID ──────────────────────────────────────────────────────────────────── */
  --gap:    14px;   /* Standard card grid gap */
  --gap-lg: 16px;   /* Large grid gap */
  --gap-sm: 12px;   /* Compact grid */
  --gap-xs:  3px;   /* Dense grid (mega menu) */

  /* ─── NAVIGATION ────────────────────────────────────────────────────────────── */
  --nav-h:   70px;  /* Navigation bar height */
  --nav-pad: clamp(20px, 4.5vw, 68px);

  /* ─── CONTAINER ─────────────────────────────────────────────────────────────── */
  --container: 1420px;
  --section-pad: clamp(20px, 5.5vw, 88px);
}

/* ─── DARK MODE OVERRIDES ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:   #0E0D0B;
  --w:    #161410;
  --ink:  #F0EDE8;
  --ink2: #A8A49E;
  --ink3: #6B6760;
  --bdr:  rgba(240, 237, 232, 0.08);
  --bdr2: rgba(240, 237, 232, 0.14);
  --r2:   rgba(255, 59, 31, 0.12);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.16);
  --shadow:     0 8px 32px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 24px 80px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-card-hover: 0 22px 56px rgba(0, 0, 0, 0.40);
}