/* POCHÉ — design tokens.
   Every value here is fixed by 02-design-dna.md. The film carries all colour
   temperature change; the chrome holds one locked theme. */

/* ---------------------------------------------------------------- fonts --
   Self-hosted, latin subset, swap. Google serves Schibsted and Hanken as
   variable faces, so one file per family covers both required weights. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-latin.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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-latin.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;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin.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;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin.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;
}
@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/fragment-mono-latin.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 {
  /* ------------------------------------------------------------- colour --
     One locked theme. The accent is rationed to exactly four jobs: the plan's
     position marker, the current room's stroke, the CTA, and selection/focus. */
  --sc-canvas:     #0D0E0C;
  --sc-surface:    #151714;
  --sc-ink:        #EAE6DC;
  --sc-ink-soft:   #9A968A;
  --sc-accent:     #C4553B;
  --sc-accent-ink: #14100D;
  --sc-line:       #2A2C27;

  /* engine hairline tokens, re-pointed at our line colour */
  --sc-hairline:        var(--sc-line);
  --sc-hairline-strong: #3A3D36;

  /* --------------------------------------------------------------- type -- */
  --sc-font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --sc-font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --sc-font-mono:    "Fragment Mono", ui-monospace, monospace;

  --t-display: clamp(3.2rem, 7.5vw, 6.5rem);
  --t-hero:    clamp(2.4rem, 5vw, 4.2rem);
  --t-head:    clamp(1.5rem, 2.6vw, 2.2rem);
  --t-body:    clamp(1rem, 1.15vw, 1.125rem);
  --t-label:   0.8125rem;
  --t-anno:    0.75rem;

  --lh-display: 0.98;
  --lh-hero:    1.02;
  --lh-head:    1.15;
  --lh-body:    1.6;

  --tr-display: -0.025em;
  --tr-hero:    -0.02em;
  --tr-head:    -0.01em;
  --tr-label:    0.02em;
  --tr-anno:     0.04em;
  --tr-mark:     0.08em;

  /* ------------------------------------------------------------ spacing -- */
  --sc-gutter: clamp(1.25rem, 4vw, 4rem);
  --measure:   52ch;
  --copy-w:    34rem;

  /* ------------------------------------------------------------- shape --
     One scale, page-wide. Architecture, not pills. */
  --sc-r-sm: 2px;
  --sc-r-md: 2px;
  --sc-r-lg: 2px;

  /* ------------------------------------------------------------ motion -- */
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --d-hover: 140ms;
  --d-press: 120ms;
  --d-line:  450ms;

  /* -------------------------------------------------------------- rail -- */
  --rail-h: 88px;
}

@media (max-width: 860px) {
  :root { --rail-h: 56px; }
}

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }