/* ==========================================================================
   tokens.css — THE single source of design tokens for the whole site.
   Extracted 1:1 from the Claude Design files (design is source of truth for
   colours / type / base tone, per the token reconciliation decision). Both
   site.css and hero.css consume these — no token definition is duplicated.
   ========================================================================== */

/* --- Self-hosted display + body fonts (font-display: swap) --------------- */
/* Barlow Condensed = headings; Barlow = body. Subsetted latin woff2 live in
   static/fonts/. Until present, the robust fallback stacks below are used. */
@font-face { font-family:"Barlow"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Barlow-Regular.81419bf5abb5.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/Barlow-Medium.8e986e86d57e.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/Barlow-SemiBold.a1e2a2d7d4c0.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Barlow-Bold.15481e4eab6d.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:500; font-display:swap; src:url("../fonts/Barlow-MediumItalic.ca3a731f09f2.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/BarlowCondensed-Medium.24f826a7cf9c.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/BarlowCondensed-SemiBold.ba4513495282.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/BarlowCondensed-Bold.e1180918b873.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/BarlowCondensed-ExtraBold.b1b7dd5dbcea.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:italic; font-weight:500; font-display:swap; src:url("../fonts/BarlowCondensed-MediumItalic.77b8b6c87814.woff2") format("woff2"); }

:root {
  /* Accent — burnt/amber orange */
  --color-accent: #e08a3c;
  --color-accent-soft: #f0a057;
  --accent-ink: #1a1206;          /* dark ink on an accent-filled surface */
  --chip-active-bg: #feecc8;       /* active category chip / filter badge */
  --chip-active-ink: #412402;
  --swatch-bg: #efe9e1;            /* off-white tile behind a swatch image */
  --accent-rgb: 224, 138, 60;

  /* Base tones — warm near-black studio */
  --color-bg-deep: #0d0a07;          /* page background */
  --color-bg: #140d07;               /* raised background */
  --surface-1: #160f08;
  --surface-2: #141009;
  --surface-3: #1c130a;              /* tooltips, popovers */
  --footer-bg: #0a0805;

  /* Foreground (cream) — use rgba(var(--fg-rgb), α) for tints */
  --fg-rgb: 242, 234, 217;
  --color-text: #f2ead9;
  --color-text-dim: rgba(242, 234, 217, 0.72);
  --color-text-muted: rgba(242, 234, 217, 0.5);
  --color-surface: rgba(242, 234, 217, 0.045);
  --color-surface-strong: rgba(242, 234, 217, 0.08);
  --color-line: rgba(242, 234, 217, 0.10);
  --color-hairline: rgba(242, 234, 217, 0.08);
  --color-line-strong: rgba(242, 234, 217, 0.16);

  /* Semantic */
  --positive: #7fc47a;
  --positive-ink: #0d2b16;
  --positive-rgb: 127, 196, 122;
  --negative: #c98a4a;
  --negative-ink: #2b1a0d;
  --negative-rgb: 201, 138, 74;
  --image-tile: #feeecd;  /* warm cream product-tile backdrop (light enough that mix-blend
                             multiply unifies white photo backgrounds without washing out) */
  --browse-bg: transparent;  /* card behind chips + search + filters (default: none) */
  --discord: #5865F2;
  --white: #fff;

  /* Typography */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --r-lg: 20px;
  --r: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-xs: 9px;
  --pill: 99px;
  --radius-chip: 999px;
  --radius-panel: 14px;

  /* Layout */
  --maxw: 1320px;
  --maxw-footer: 1232px;
  --maxw-read: 720px;
  --maxw-narrow: 1100px;
  --gutter: 44px;

  /* Nav */
  --nav-scrolled: rgba(13, 10, 7, 0.72);
}

@media (max-width: 900px) { :root { --gutter: 28px; } }
@media (max-width: 560px) { :root { --gutter: 18px; } }