/* ============================================================
   aziz-alshammari.com · design tokens & base — "Copper & Ledger"
   Phase 1 of the redesign (REDESIGN_HANDOVER.md §4, §7.1).
   Single source of truth for palette, type, spacing, radii and
   the self-hosted fonts. Pages layer their own component CSS on
   top of these custom properties.
   ============================================================ */

/* ---------- self-hosted fonts (Latin subsets, OFL) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-var-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+2010-2015, U+2018-201A,
    U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2190-2193, U+2212;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+2010-2015, U+2018-201A,
    U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2190-2193, U+2212;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+2010-2015, U+2018-201A,
    U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2190-2193, U+2212;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+2010-2015, U+2018-201A,
    U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2190-2193, U+2212;
}

/* ---------- tokens ---------- */

:root {
  /* Palette (§4.2) */
  --paper:       #F2F3F1;  /* cool bone — technical paper, NOT warm cream */
  --ink:         #171A1C;  /* graphite ink — near-black with blue-grey cast */
  --ink-2:       #4A5157;  /* secondary text */
  --copper:      #B4622D;  /* drawn copper — links, deltas, ask-affordances */
  --verdigris:   #3E6155;  /* oxidized copper — verified states, chat identity */
  --grid:        #D9DCD6;  /* hairlines, rules, borders */
  --paper-raise: #FBFBFA;  /* cards/composer surfaces, one step above paper */

  /* Derived accents (all pairs verified ≥ 4.5:1 unless noted) */
  --copper-deep:    #9A4F1F; /* copper for small text (5.37:1 on paper) */
  --copper-hover:   #7C3F17; /* hover step below copper-deep (7.31:1 on paper) */
  --copper-on-dark: #D08A57; /* copper accents on the ink band (6.21:1 on ink) */
  --on-ink-2:       #C9CCC7; /* body text on ink (10.78:1) */
  --on-ink-3:       #A9AEA8; /* secondary text on ink (7.75:1) */
  --on-ink-4:       #9AA09A; /* footnote text on ink (6.55:1) */

  /* Type (§4.3) */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Type scale (desktop → mobile via clamp; consumed by the Phase 2 rebuild) */
  --text-display-1: clamp(2.25rem, 1.71rem + 2.68vw, 3.5rem);   /* 56 → 36 / 1.05 */
  --text-display-2: clamp(1.75rem, 1.54rem + 1.07vw, 2.25rem);  /* 36 → 28 / 1.1  */
  --text-h3:        clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem);   /* 24 → 20 / 1.2  */
  --text-body:      clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);   /* 17 → 16 / 1.6  */
  --text-small:     0.875rem;                                   /* 14 / 1.5 */
  --text-mono-label: 0.78125rem;                                /* 12.5, uppercase */
  --track-mono-label: 0.06em;

  /* Space (§4.4) — 4px base scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --section-rhythm: var(--sp-9);         /* 96 desktop */
  --section-rhythm-mobile: var(--sp-8);  /* 64 mobile  */

  /* Shape (§4.4) */
  --r-chip: 4px;   /* chips, inputs */
  --r-card: 8px;   /* cards */
  --r-pill: 999px; /* ask-affordance pill */

  /* Layout (§4.4) — consumed by the Phase 2 rebuild */
  --max-content: 1080px;
  --measure: 68ch;
  --chat-col: 720px;

  /* Hairline elevation */
  --hairline: 1px solid var(--grid);
}

/* ---------- base primitives (§7.1) ---------- */

::selection {
  background: rgba(180, 98, 45, 0.2); /* copper 20% */
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced motion is non-negotiable (§4.5). Belt-and-braces: pages gate
   their own animations, this catches anything that slips through. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}