/* ==========================================================================
   CCY Oto Ekspertiz — Tasarım Sistemi Token'ları
   Konsept: Precision Inspection Lab
   ========================================================================== */

:root {
  /* --- Yüzeyler: bölümler yalnızca siyah / beyaz --------------------------- */
  --canvas: #000000;
  --surface-1: #000000;
  --surface-2: #111111;
  --surface-3: #1a1a1a;

  /* --- Açık yüzeyler (krem / off-white yok) -------------------------------- */
  --paper: #ffffff;
  --paper-pure: #ffffff;
  --paper-sunk: #f5f5f5;

  /* --- Metin -------------------------------------------------------------- */
  --ink-dark: #121416;
  --ink-light: #f7f7f5;
  --ink-muted: #8d9298;
  --ink-muted-dark: #5c6167;

  /* --- Ayırıcılar --------------------------------------------------------- */
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --hairline-dark: rgba(18, 20, 22, 0.12);
  --hairline-dark-strong: rgba(18, 20, 22, 0.2);

  /* --- Marka -------------------------------------------------------------- */
  /* #FFF205 logodan örneklendi. Sarı üstünde metin daima --brand-ink olmalı. */
  --brand: #fff205;
  --brand-dim: #d4c904;
  --brand-deep: #a89f03;
  --brand-ink: #121416;
  --brand-wash: rgba(255, 242, 5, 0.12);
  --brand-line: rgba(255, 242, 5, 0.35);

  /* Logodaki çelik grisi — ölçüm çizgileri ve teknik grid için */
  --steel: #9caeba;
  --steel-dim: rgba(156, 174, 186, 0.42);
  --steel-faint: rgba(156, 174, 186, 0.14);

  /* TSE-HYB belge kırmızısı — YALNIZCA belge rozetinde, CTA'da değil */
  --cert-red: #cc0000;

  /* --- Rapor durum skalası ------------------------------------------------
     Marka sarısıyla çakışmaması için amber/sarı tonu bilinçli olarak yok.
     Her durum renk + metin etiketi + dolgu deseni ile üçlü kodlanır.        */
  --st-ok: #4ade80;
  --st-risk: #f97316;
  --st-bad: #ef4444;
  --st-na: #6b7280;
  --st-ok-wash: rgba(74, 222, 128, 0.14);
  --st-risk-wash: rgba(249, 115, 22, 0.14);
  --st-bad-wash: rgba(239, 68, 68, 0.14);
  --st-na-wash: rgba(107, 114, 128, 0.16);

  /* --- Tipografi ---------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;

  --fs-display: clamp(3.375rem, 6vw, 6.5rem); /*  54 → 104 */
  --fs-h2: clamp(2.375rem, 4vw, 4.5rem); /*  38 →  72 */
  --fs-h3: clamp(1.5rem, 1.6vw, 2rem); /*  24 →  32 */
  --fs-h4: clamp(1.1875rem, 1vw, 1.375rem); /*  19 →  22 */
  --fs-lede: clamp(1.0625rem, 0.6vw, 1.25rem); /*  17 →  20 */
  --fs-body: 1.0625rem; /*  17 */
  --fs-sm: 0.9375rem; /*  15 */
  --fs-label: 0.8125rem; /*  13 */
  --fs-micro: 0.6875rem; /*  11 */

  --lh-display: 1.02;
  --lh-h2: 1.06;
  --lh-h3: 1.2;
  --lh-body: 1.6;
  --lh-tight: 1.45;

  --tr-display: -0.035em;
  --tr-h2: -0.03em;
  --tr-h3: -0.02em;
  --tr-micro: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Yerleşim ----------------------------------------------------------- */
  --container: 1600px;
  --pad-x: clamp(1.125rem, 4vw, 4rem); /* 18px → 64px */
  --gutter: 1.5rem;
  --gutter-sm: 1rem;
  --section-y: clamp(4.5rem, 8vw, 9rem); /* 72px → 144px */
  --section-y-sm: clamp(3rem, 5vw, 5rem);

  /* 4px temel boşluk merdiveni */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Geometri: spec-sheet, photo-tile değil ----------------------------- */
  --r-none: 0px;
  --r-btn: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --bw: 1px;
  --bw-thick: 2px;

  /* --- Hareket ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-enter: 400ms;
  --dur-exit: 250ms;
  --dur-reveal: 700ms;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);

  /* --- Katmanlar ---------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-mobilebar: 90;
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 220;
  --z-sheet: 260;
  --z-lightbox: 300;

  /* --- Kroma ------------------------------------------------------------- */
  --header-h: 76px;
  --utility-h: 38px;
  --mobilebar-h: 68px;
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
  --focus-ring-light: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-deep);
}

@media (max-width: 1024px) {
  :root {
    --header-h: 68px;
    --utility-h: 34px;
    --gutter: 1.25rem;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 62px;
    --utility-h: 32px;
    --gutter: 1rem;
    /* Mobilde hareket süreleri %25 kısa — kat edilen mesafe daha az */
    --dur-fast: 120ms;
    --dur-base: 190ms;
    --dur-enter: 300ms;
    --dur-reveal: 520ms;
  }
}