/* ==========================================================================
   tokens.css — design tokens of the Ceyhan OSB site (single source of truth).
   Raw colour values live ONLY in this file. Everything else uses var(--…).
   Source: Figma "Ceyhan Organize Sanayi" (styles COSB/*) + BUILD-CONTRACT §5.
   Accessibility deviations from Figma are marked "A11Y" (text contrast AA).
   Breakpoints (mobile-first, min-width — custom properties cannot be used in
   media queries, so they are documented here): 480 · 768 · 1024 · 1280 · 1440 · 1600
   ========================================================================== */

:root {
  /* ---- colour · brand ------------------------------------------------- */
  --color-navy-900: #002a61;   /* home top bar, footer background */
  --color-navy-800: #003376;   /* primary brand: header/hero band, headings, primary buttons */
  --color-navy-700: #0a3f87;   /* "lacivert orta": third level of the org chart (Figma 248:188) */
  --color-blue-500: #008fcc;   /* accent for non-text: underline, arrows, big numerals, focus */
  --color-sky-400: #41bde8;    /* secondary accent on dark: footer dividers, eyebrow on navy */
  --color-blue-600: #006fa3;   /* A11Y: accent for TEXT on light surfaces (5.5:1 on white) — Figma uses #008FCC */
  --color-ink: #0e1b2e;        /* strongest text (news titles) */
  --color-indigo: #1e3a8a;     /* announcement titles in the home panel */

  /* ---- colour · text -------------------------------------------------- */
  --color-slate-600: #44526a;  /* body text */
  --color-slate-500: #6b7a90;  /* muted, NON-text uses (icons, rules) */
  --color-text-muted: #5b6a80; /* A11Y: muted TEXT (5.5:1 on white, 4.9:1 on surface) — Figma uses #6B7A90 */
  --color-on-dark: #b9cbe3;    /* muted text on navy (footer links, breadcrumb) */
  --color-on-image: #d6e2f2;   /* muted text on image / hero intro */
  --color-white: #ffffff;

  /* ---- colour · surfaces & lines -------------------------------------- */
  --color-border: #e3e8ef;
  --color-placeholder: #e4eaf2;   /* image placeholder surface */
  --color-control-border: #c9d4e0;
  --color-tile: #d5deea;
  --color-surface: #f5f7fa;       /* subtle surface: hover rows, boxes */
  --color-on-dark-border: #33588f; /* social buttons, top-bar divider, breadcrumb separator */
  --color-footer-rule: #1f4a87;
  --color-rail-blue: #007bb5;     /* A11Y: side-rail tile (Figma #008ECA fails 4.5:1 with white text) */

  /* ---- colour · status ------------------------------------------------ */
  --color-red: #e30a17;           /* PDF chip, Turkish-flag red, form error */
  --color-error-text: #c4091b;
  --color-error-bg: #fde8ea;
  --color-success: #0ba360;       /* dot / border / icon */
  --color-success-text: #0a6b40;  /* A11Y: text on tinted bg */
  --color-success-bg: #e6f6ee;
  --color-warning: #e8a317;       /* dot / border / icon */
  --color-warning-text: #7a5200;
  --color-warning-bg: #fdf3dc;
  --color-info-bg: #e6f3fa;
  --color-neutral-bg: #edf1f6;

  /* ---- colour · overlays (used by slider, dialogs, gradients) --------- */
  --color-overlay-navy: rgb(0 26 61 / 0.72);
  --color-overlay-navy-soft: rgb(0 26 61 / 0.2);
  --color-overlay-navy-strong: rgb(0 26 61 / 0.78);   /* bottom gradient of the home mosaic tiles (Figma 46:200) */
  --color-scrim: rgb(0 26 61 / 0.55);       /* dialog / drawer backdrop */
  --color-sheen: rgb(255 255 255 / 0.14);
  --color-hover-on-dark: rgb(255 255 255 / 0.1);   /* hover fill of ghost buttons on navy */
  --color-hover-sky: rgb(65 189 232 / 0.12);       /* hover fill of outlined controls on navy */

  /* ---- typography ----------------------------------------------------- */
  --font-sans: Ubuntu, "Segoe UI", system-ui, -apple-system, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* COSB/H1 46/56/500/-0.4 — fluid 30 → 46 between 390 and 1440 */
  --text-h1-size: clamp(1.875rem, 1.504rem + 1.524vw, 2.875rem);
  --text-h1-lh: 1.217;
  --text-h1-weight: var(--weight-medium);
  --text-h1-tracking: -0.4px;
  /* COSB/H2 38/48/500/-0.3 — fluid 26 → 38 */
  --text-h2-size: clamp(1.625rem, 1.346rem + 1.143vw, 2.375rem);
  --text-h2-lh: 1.263;
  --text-h2-weight: var(--weight-medium);
  --text-h2-tracking: -0.3px;
  /* h3 (card / subsection titles): 24/32/500 → 20/28 on small screens */
  --text-h3-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-h3-lh: 1.34;
  --text-h3-weight: var(--weight-medium);
  /* COSB/Rakam 44/52/300 — fluid 32 → 44 */
  --text-number-size: clamp(2rem, 1.721rem + 1.143vw, 2.75rem);
  --text-number-lh: 1.182;
  --text-number-weight: var(--weight-light);
  /* COSB/Giris 18/31/400 (17/28 below 768) */
  --text-lead-size: 1.0625rem;
  --text-lead-lh: 1.65;
  /* COSB/Govde 17/29/400 (16/27 below 768) */
  --text-body-size: 1rem;
  --text-body-lh: 1.7;
  /* COSB/Govde K 15/24/400 */
  --text-body-sm-size: 0.9375rem;
  --text-body-sm-lh: 1.6;
  /* COSB/Buton 15/20/500 */
  --text-button-size: 0.9375rem;
  --text-button-lh: 1.333;
  /* COSB/Kucuk 13/18/400 */
  --text-small-size: 0.8125rem;
  --text-small-lh: 1.385;
  /* eyebrow 13/18/500 uppercase tracking 1.04px */
  --text-eyebrow-size: 0.8125rem;
  --text-eyebrow-lh: 1.385;
  --text-eyebrow-tracking: 0.08em;
  /* card / tile titles 18/31/500 */
  --text-title-size: 1.125rem;
  --text-title-lh: 1.722;

  /* ---- spacing (px-named, 4-based) ------------------------------------ */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;

  /* ---- radii ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;       /* buttons, inputs */
  --radius-md: 8px;       /* small cards, menu rows */
  --radius-slide: 10px;   /* slider slides */
  --radius-lg: 12px;      /* cards, panels */
  --radius-pill: 24px;    /* round buttons */
  --radius-full: 999px;

  /* ---- shadows -------------------------------------------------------- */
  --shadow-soft: 0 8px 32px rgb(0 51 118 / 0.1);       /* COSB/Golge yumusak */
  --shadow-dropdown: 0 12px 40px rgb(0 51 118 / 0.14);
  --shadow-slide: 0 8px 24px rgb(0 26 64 / 0.14);
  --shadow-slide-side: 0 8px 24px rgb(0 26 64 / 0.08);   /* Figma 46:200 side slides */
  --shadow-control: 0 2px 10px rgb(0 51 118 / 0.06);
  --shadow-card: 0 4px 16px rgb(0 51 118 / 0.06);      /* home news cards (Figma 234:194) */
  --shadow-rail: 0 6px 20px rgb(0 26 61 / 0.22);
  --shadow-bottom-bar: 0 -6px 20px rgb(0 26 61 / 0.18);
  --shadow-knob: 0 1px 3px rgb(0 26 61 / 0.3);
  --shadow-focus: 0 0 0 3px rgb(0 143 204 / 0.2);   /* input focus glow */

  /* ---- layout --------------------------------------------------------- */
  --container-max: 1320px;                 /* content width */
  --gutter: 20px;                          /* 20 @390 · 24 @480 · 32 @768 · 40 @1024 · 60 @1440 (see below) */
  --sidebar-width: 300px;
  --sidebar-gap: 56px;
  --header-topbar-height: 40px;
  --hero-band-min-height: 0px;
  --side-rail-width: 128px;                /* full tiles ≥ 1600 px */
  --side-rail-compact-width: 56px;         /* icon tabs 1024–1599 px */
  --bottom-bar-height: 58px;               /* mobile action bar: fallback = two-line labels; main.js sets the measured height */
  --bottom-bar-min-height: 48px;           /* minimum height of one action-bar cell */

  /* ---- motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;      /* hover */
  --dur-base: 200ms;      /* dropdowns, dialogs (160–200) */
  --dur-slow: 450ms;      /* slider */
  --dur-reveal: 400ms;    /* reveal on scroll (≤ 400) */
  --reveal-distance: 12px;

  /* ---- focus ---------------------------------------------------------- */
  --focus-color: #008fcc;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- z-index scale -------------------------------------------------- */
  --z-side-rail: 60;
  --z-header: 100;
  --z-dropdown: 110;
  --z-cookie: 150;
  --z-drawer: 200;
  --z-dialog: 300;
  --z-toast: 400;
  --z-skip-link: 1000;
}

/* body copy grows from 768 up */
@media (min-width: 768px) {
  :root {
    --text-lead-size: 1.125rem;
    --text-lead-lh: 1.722;
    --text-body-size: 1.0625rem;
    --text-body-lh: 1.706;
  }
}

/* reduced motion: every transition/animation duration collapses, reveal offsets vanish */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --reveal-distance: 0px;
  }
}

/* fluid gutter: 20 / 24 / 32 / 40 / 60 */
@media (min-width: 480px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }
@media (min-width: 1440px) { :root { --gutter: 60px; } }

/* ==========================================================================
   Phase 5 · stream A · lists — tokens
   ========================================================================== */

/* stream A · lists — tokens
   No new tokens: every value of the Güncel lists and details comes from the existing scale (tokens.css). */