/* ============================================================================
   THICKRIM brand system — materialized from kylecwillis/tr-press-kit
   Fonts (self-hosted WOFF2), the full palette, and the type stacks.

   Type roles:
     display / headings → Space Grotesk   (var --tr-font-display)
     body / UI          → Inter           (var --tr-font-sans)
     mono / code        → IBM Plex Mono    (var --tr-font-mono)

   Colour is authored for a warm light canvas by default; the
   prefers-color-scheme: dark block remaps surface + ink + line roles.
   Crimson (#C8102E) is the one load-bearing accent — a rule, a tick, one
   word, never a fill. On dark grounds use --tr-crimson-ink (lifted for AA).
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */

/* Inter — variable (preferred; drives 100–900 via font-weight) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-Variable-latin.woff2') format('woff2');
}
/* Inter — static weights (fallback for engines without variable support) */
@font-face {
  font-family: 'Inter Static';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter-Regular-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Static';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter-Medium-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Static';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter-SemiBold-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Static';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter-Bold-latin.woff2') format('woff2');
}

/* Space Grotesk — variable display face (headings + the wordmark as type) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/SpaceGrotesk-VF-latin.woff2') format('woff2');
}

/* IBM Plex Mono — the UI/data mono with tabular figures */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-Regular-latin.woff2') format('woff2');
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* Brand accent — the one load-bearing colour */
  --tr-crimson:     #C8102E;   /* rgb(200 16 46) · print ≈ Pantone 186 C */
  --tr-crimson-ink: #A50C22;   /* crimson darkened for text on light (AA) */
  --tr-amber:       #ffb000;   /* the pill's hover beat only */

  /* Convenience aliases (crimson is the primary/accent red) */
  --tr-red:     var(--tr-crimson);
  --tr-red-ink: var(--tr-crimson-ink);

  /* Secondary system — petrol anchor + champagne metallic */
  --tr-petrol:    #0e3a40;     /* cool anchor for large full-colour surfaces */
  --tr-petrol-2:  #1c6e74;     /* lighter petrol step */
  --tr-champagne: #b99457;     /* rare luxury metallic (foil, a stat, a rule) */
  --tr-foil: linear-gradient(100deg, #7a5a2e, #ecd7a6 35%, #b8925a 55%, #ecd7a6 72%, #8a6a38);

  /* Surface + ink (light theme, the default) */
  --tr-bg:      #f7f6f3;       /* warm canvas */
  --tr-panel:   #ffffff;
  --tr-panel-2: #f0eee9;
  --tr-ink:     #14130f;       /* near-black, warm */
  --tr-muted:   #605f5b;       /* 5.9:1 on canvas — clears AA */
  --tr-border:  #e2e0da;

  /* Line roles — one scale for every hairline / divider / edge */
  --tr-hairline:    rgb(20 19 15 / 0.10);
  --tr-line:        rgb(20 19 15 / 0.16);   /* rule */
  --tr-rule:        rgb(20 19 15 / 0.16);
  --tr-edge:        rgb(20 19 15 / 0.18);
  --tr-edge-strong: rgb(20 19 15 / 0.30);

  /* Type stacks */
  --tr-font-display: 'Space Grotesk', ui-sans-serif, system-ui, Arial, sans-serif;
  --tr-font-sans:    'Inter', 'Inter Static', ui-sans-serif, -apple-system, 'SF Pro Text', Segoe UI, Roboto, sans-serif;
  --tr-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Courier New', monospace;

  /* Aliases matching the kit's token names */
  --tr-sans:    var(--tr-font-display); /* documents are set in Space Grotesk */
  --tr-ui:      var(--tr-font-sans);    /* screens/UI are set in Inter */
  --tr-mono-ui: var(--tr-font-mono);

  /* Wordmark-as-type: Space Grotesk, uppercase, 600, tracking 0.34em */
  --tr-track-word: 0.34em;

  /* Elevation */
  --tr-shadow:     0 1px 2px -1px rgb(20 19 15 / 0.06), 0 4px 14px -6px rgb(20 19 15 / 0.08);
  --tr-shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.28);
}

/* ── Dark mode — remap surface + ink + line; lift crimson for text ──────── */
@media (prefers-color-scheme: dark) {
  :root {
    --tr-bg:      #08080a;
    --tr-panel:   #111113;
    --tr-panel-2: #161618;
    --tr-ink:     #f5f3ef;
    --tr-muted:   #9b9b9b;
    --tr-border:  #242428;

    --tr-crimson-ink: #F26D7A;   /* crimson lifted for text on near-black (AA) */
    --tr-red-ink:     #F26D7A;

    --tr-hairline:    rgb(245 243 239 / 0.07);
    --tr-line:        rgb(245 243 239 / 0.12);
    --tr-rule:        rgb(245 243 239 / 0.12);
    --tr-edge:        rgb(245 243 239 / 0.14);
    --tr-edge-strong: rgb(245 243 239 / 0.26);

    --tr-shadow:     inset 0 1px 0 0 rgb(255 255 255 / 0.045), 0 1px 0 0 rgb(0 0 0 / 0.4);
    --tr-shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.6);
  }
}

/* Explicit override hook: <html data-theme="dark"> forces dark regardless of OS */
:root[data-theme="dark"] {
  --tr-bg:      #08080a;
  --tr-panel:   #111113;
  --tr-panel-2: #161618;
  --tr-ink:     #f5f3ef;
  --tr-muted:   #9b9b9b;
  --tr-border:  #242428;
  --tr-crimson-ink: #F26D7A;
  --tr-red-ink:     #F26D7A;
  --tr-hairline:    rgb(245 243 239 / 0.07);
  --tr-line:        rgb(245 243 239 / 0.12);
  --tr-rule:        rgb(245 243 239 / 0.12);
  --tr-edge:        rgb(245 243 239 / 0.14);
  --tr-edge-strong: rgb(245 243 239 / 0.26);
  --tr-shadow:     inset 0 1px 0 0 rgb(255 255 255 / 0.045), 0 1px 0 0 rgb(0 0 0 / 0.4);
  --tr-shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.6);
}