/*
 * 3dbox theme — brand VALUES for the 3dbox.dk storefront.
 *
 * This is the SINGLE place brand values (hex colours, font families) are allowed to live.
 * Loaded AFTER css/site.css by _Head, so these :root declarations win via the cascade and
 * re-skin the contract tokens. Re-skinning the whole shop = swap SiteOptions.Theme and add
 * one themes/{shop}.css file; no component or page CSS changes.
 *
 * Hex values are approximations read from the locked "Maker" Claude Design mock — refine
 * against the design source if exact hexes surface.
 *
 * Display face: self-hosted Montserrat (SIL OFL; licence at /fonts/montserrat-OFL.txt).
 * Served ONLY from our own origin — GDPR forbids runtime requests to Google/any font CDN.
 * Latin subset (covers Danish æ/ø/å), weight 800 only — the single weight display text
 * uses (--weight-display; heading rules in base.css). Body face (Inter) still ships no
 * @font-face and falls back gracefully.
 *
 * Only brand-relevant tokens are re-declared here. The structural scale (spacing, type
 * sizes, leading, tracking, weights, radii other than --radius-card, shadows, container,
 * breakpoints) stays in tokens.css and is intentionally NOT repeated.
 */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/montserrat-v31-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces & text */
  --color-bg: #FBF7EF;
  --color-surface: #ffffff;
  --color-surface-shell: #F3EEE4;
  --color-ink: #1A1613;
  --color-ink-muted: #6E675C;
  --color-line: #E6DECF;

  /* Action */
  --color-action: #15110D;
  --color-on-action: #FBF7EF;
  --color-action-hover: #000000;

  /* Playground pops + silhouette ink */
  --color-pop-1: #E5197F; /* pink/magenta — Decor          */
  --color-pop-2: #2D6CDF; /* blue        — Toys & Games     */
  --color-pop-3: #1F9E4A; /* green       — Desk & Office    */
  --color-pop-4: #8E2DC4; /* purple      — Gifts            */
  --color-pop-5: #F0792A; /* orange      — Bestsellers      */
  --color-pop-6: #F4C518; /* yellow/gold — Lighting         */
  --color-on-pop: #FDFBF7;

  /* Type — display is self-hosted (above); body is a target family with graceful fallback */
  --font-display: "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body: "Inter",system-ui,-apple-system,sans-serif;

  /* One brand-tuned radius; the rest of the radius scale stays neutral in tokens.css */
  --radius-card: 18px;
}