/* ==========================================================================
   kadirozbek.com — design tokens ("Sakin", Buz palette)
   Quiet, cool off-white; the work brings the colour. Mirrors the Figma
   variables in "kadirozbek.com — UI v3" (Color/Buz, Spacing, text styles).
   ========================================================================== */

@layer tokens, base, layout, components, pages, utilities;

/* One self-hosted variable family (Geist, OFL-1.1), subset to Latin + Turkish. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-var.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-italic-var.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
/* Metric-matched fallback keeps layout stable while the webfont swaps in. */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104.5%;
  ascent-override: 91%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Colour (Figma: Color / Buz) ---- */
    --bg: #f3f6fa;             /* page — cool off-white */
    --surface: #ffffff;        /* cards, panels, pills */
    --sunken: #e7ecf3;         /* placeholders, quiet fills */
    --tint: #dde6f3;           /* soft blue tone (covers) */
    --ink: #12151b;            /* primary text — 17.6:1 on bg */
    --ink-2: #39414e;          /* secondary text — 10:1 */
    --mute: #5e6878;           /* muted text — 5.2:1 on bg, 5.7:1 on white */
    --line: #e1e7ef;
    --line-strong: #cfd8e4;
    --inverse: #12151b;
    --inverse-hover: #2a303a;
    --on-inverse: #ffffff;
    --accent: #c2603a;         /* clay — decoration only (dots, markers), never body text */
    --danger: #b42318;         /* form errors — 6.3:1 on white */
    --ok: #1f7a4d;
    --scrim: rgb(18 21 27 / 0.5);
    --frost: rgb(255 255 255 / 0.86);

    /* Compatibility aliases used by page layers. */
    --paper: var(--bg);
    --paper-2: var(--sunken);
    --red: var(--accent);
    --on-red: var(--on-inverse);

    --font: "Geist", "Geist Fallback", Arial, Helvetica, sans-serif;
    --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

    /* ---- Type (Figma text styles, fluid 390 → 1440) ---- */
    --fs-xs: 0.8125rem;                                         /* Caption 13 */
    --fs-sm: 0.875rem;                                          /* Label S 14 */
    --fs-label: 0.9375rem;                                      /* Label M / Body S 15 */
    --fs-base: 1rem;                                            /* Body M 16 */
    --fs-read: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);        /* Body L 17–18 */
    --fs-lg: clamp(1.1875rem, 1.05rem + 0.55vw, 1.625rem);      /* Heading M 19–26 */
    --fs-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);           /* Display M 28–44 */
    --fs-2xl: clamp(2.25rem, 1.65rem + 2.4vw, 3.75rem);         /* Display L 36–60 */
    --fs-3xl: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem);          /* Display XL 44–84 */
    --fs-hero: clamp(3.25rem, 1.5rem + 7vw, 7.5rem);            /* page titles 52–120 */
    --fs-name: var(--fs-hero);

    --w-light: 300;
    --w-regular: 400;
    --w-medium: 500;

    --lh-tight: 1;
    --lh-head: 1.04;
    --lh-body: 1.55;
    --lh-read: 1.65;
    --track-tight: -0.05em;
    --track-head: -0.035em;
    --track-title: -0.012em;
    --track-body: -0.003em;
    --measure: 66ch;

    /* ---- Space (4px grid; Figma Spacing) ---- */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem;
    --section: clamp(4.5rem, 2.5rem + 6vw, 8.5rem);

    /* ---- Grid ---- */
    --margin: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
    --gutter: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
    --header-h: 4.25rem;

    /* ---- Shape ---- */
    --radius-sm: 0.5625rem;    /* 9  small thumbnails */
    --radius-md: 1rem;         /* 16 compact cards */
    --radius: 1.25rem;         /* 20 media + cards */
    --radius-lg: 1.75rem;      /* 28 stage, large media */
    --radius-xl: 2rem;         /* 32 panels */
    --radius-pill: 999px;
    --target: 44px;
    --focus: 2px solid var(--ink);
    --shadow-float: 0 24px 48px -20px rgb(18 21 27 / 0.22);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --d-press: 140ms;
    --d-fast: 180ms;
    --d-ui: 260ms;
    --d-slow: 700ms;

    --z-header: 50;
    --z-menu: 80;
    --z-dialog: 90;
    --z-consent: 95;
    --z-skip: 100;
  }

  @media (min-width: 64em) { :root { --header-h: 5.25rem; } }

  @media (prefers-reduced-motion: reduce) {
    :root { --d-slow: 0ms; --d-ui: 120ms; }
  }

  @media (prefers-contrast: more) {
    :root { --mute: #39414e; --line: #b9c4d2; --line-strong: #8794a6; }
  }
}