/* ==========================================================================
   Tokens — Oozzit Design System
   Single source of truth. No hard-coded values anywhere else.
   ========================================================================== */

/* ── Display face ──────────────────────────────────────────────────────────
   The reference logos (ORANGE, JAPAN) are ULTRA-CONDENSED display type. That
   proportion is most of what makes them feel premium and poster-like.

   The stack below resolves, in order, to:
     1. Anton / Archivo Condensed  — install these for the real thing
     2. DIN Condensed              — ships with macOS, very close, free
     3. Oswald / Impact            — Windows / fallback
     4. Space Grotesk              — the original build's face, last resort

   TO GET THE INTENDED LOOK: download Anton (Google Fonts, SIL Open Font
   Licence, ~40 KB) into assets/fonts/ and uncomment the @font-face below.
   Everything else in the CSS already assumes condensed proportions.
   ────────────────────────────────────────────────────────────────────────── */

/*
@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/Anton-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
*/

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Colour ── */
  --ink:         #0A0A0B;    /* page base, near-black, faintly cool */
  --surface:     #141417;    /* raised panels, cards */
  --surface-2:   #1D1D21;    /* borders, dividers, inputs */
  --paper:       #F2EFE9;    /* primary text — warm, never pure white */
  --paper-dim:   #A3A099;    /* secondary text, captions, labels */
  --accent:      #F26522;    /* vivid orange — the reference accent */
  --accent-hot:  #FF4D1C;    /* gradient top */
  --accent-deep: #B8341A;    /* gradient bottom */
  --accent-dim:  #8A3312;

  /* The hero card's warm field. High-contrast subject sits over this. */
  --grad-hero: linear-gradient(168deg,
                 var(--accent-hot) 0%,
                 var(--accent) 38%,
                 var(--accent-deep) 78%,
                 #4A1608 100%);

  /* ── Typography ── */
  --font-display: 'Anton', 'Archivo Condensed', 'DIN Condensed',
                  'Oswald', Impact, 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Condensed faces carry far more weight per pixel, so the display scale
     runs larger and tighter than a normal grotesque would. */
  --t-hero:   clamp(2.25rem, min(7.5vw, 9.5vh), 6.5rem);
  --t-h2:     clamp(2.25rem, 6.5vw, 5rem);
  --t-h3:     clamp(1.5rem, 3vw, 2.25rem);
  --t-body:   clamp(1.0625rem, 1.2vw, 1.1875rem);
  --t-small:  0.875rem;
  --t-label:  0.75rem;

  /* Display tracking — condensed type needs less negative tracking than a
     wide grotesque, or the counters close up. */
  --track-display: -0.015em;
  --track-label:    0.1em;

  /* ── Space ── */
  --s-section: clamp(5rem, 12vw, 11.25rem);
  --s-block:   clamp(2rem, 5vw, 4rem);
  --s-gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --measure:   64ch;

  /* ── Form ──
     The page is a black canvas holding inset rounded cards. That inset plus
     a large radius is most of what reads as premium here — it's the Apple
     shape language, and it's what the reference is actually doing. */
  --radius:      8px;
  --radius-lg:   16px;
  --radius-card: clamp(20px, 2.4vw, 34px);
  --radius-pill: 999px;
  --page-inset:  clamp(10px, 1.1vw, 18px);
  --border:      1px solid var(--surface-2);
  --header-h:    64px;

  /* ── Motion ── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  150ms;
  --dur-base:  400ms;
  --dur-slow:  800ms;
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}