/* Self-hosted brand fonts — no third-party requests at runtime.
   (Phase 2: promote this to a direct <link> in each page to drop
   the extra serial round-trip @import costs.) */
@import url('./fonts.css');

/* ============================================================
   Team Dub Labs Ltd — shared brand tokens
   Source of truth: Brand Identity Guidelines
   The ONLY file shared across prototypes. Everything else is
   per-direction so the visual approaches stay independent.
   ============================================================ */

:root {
  /* --- Core palette (exact, from the guidelines) --- */
  --safety-orange: #FF5F15;
  --space-black:   #1D1D1F;
  --off-white:     #FAF9F6;

  /* --- Contrast-safe pairings (measured, WCAG) ---
     off-white  on space-black .... 16.00:1  AAA
     orange     on space-black ....  5.53:1  AA
     space-black on orange .......   5.53:1  AA
     orange     on off-white .....   2.89:1  FAILS at every size
     Hence: --on-orange is ALWAYS space-black, and orange text is
     only ever permitted on a dark ground.
     Two corollaries (WCAG audit, 2026-08):
     · No alpha-muted text on orange. rgba tints of space-black
       stay under 4.5:1 until ~90% opacity, so text on orange is
       always solid --on-orange; express hierarchy with size,
       weight, or case instead of colour.
     · Links/hovers on light grounds keep space-black text and
       carry the orange as an underline only (decoration carries
       no text-contrast requirement). */
  --on-orange:      var(--space-black);
  --accent-on-dark: var(--safety-orange);

  /* --- Derived neutrals (tints of the two base colours only;
         no new hues are introduced into the system) --- */
  --black-raise-1: #26262a;   /* card surface on dark */
  --black-raise-2: #303036;   /* hairline / border on dark */
  --white-sink-1:  #efeee9;   /* card surface on light */
  --white-sink-2:  #dedcd5;   /* hairline / border on light */
  --muted-on-dark:  #9a9aa1;
  --muted-on-light: #6b6b70;

  /* --- Type roles ---
     display:  Zen Dots. MAX 4 WORDS (guidelines rule).
     header:   Archivo. ALL CAPS, 0.05em tracking.
               (Replaces Lemon Milk, which required a commercial
                licence — see plan. Archivo is SIL OFL.)
     body:     Inter or Space Grotesk, set per direction. */
  --font-display: 'Zen Dots', system-ui, sans-serif;
  --font-header:  'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --track-header: 0.05em;

  /* --- Spacing scale --- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;

  /* --- Logo assets (rebuilt 2026-07-31, all transparent) ---
     logo-horizontal.png ......... banner lockup, 1433x336
     logo-lockup-transparent.png . stacked lockup, 792x390
     logo-mark-new.png ........... square TD mark tile, 800x800
     (logo-lockup.png / logo-mark.png are the old opaque files,
      kept only so the round-1 pages stay exactly as reviewed.)

     USAGE RULE — Brand Identity Guidelines §4 Logo Usage:
     The banner (horizontal) lockup is DARK-BACKGROUND ONLY. Never
     place it on a light ground — its baked-in black panel reads as
     a heavy block on Off-White. The stacked lockup is dark-only
     too: the upper halves of its letterforms are off-white and
     vanish on light. On light grounds use the square TD mark
     (self-contained dark tile) with the wordmark as live Archivo
     text — the .brand pattern below — or the mark alone. */
  --logo-banner: url('../assets/logo-horizontal.png');
  --logo-lockup: url('../assets/logo-lockup-transparent.png');
  --logo-mark:   url('../assets/logo-mark-new.png');
}

/* --- Shared reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Header brand pattern for LIGHT grounds (see usage rule above):
   square TD mark — its own dark tile — plus the name as live Archivo
   text. Headers on DARK grounds may use the banner lockup <img>
   directly instead. */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit;}
.brand-mark{height:34px;width:34px;flex:none;}
.brand-name{font-family:var(--font-header);text-transform:uppercase;
  letter-spacing:.08em;font-weight:800;font-size:15px;white-space:nowrap;}

/* Skip link — first focusable element on every page. Parked off
   screen until keyboard focus brings it into view (WCAG 2.4.1). */
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:100;
  background:var(--space-black);color:var(--off-white);
  font-family:var(--font-header);text-transform:uppercase;
  letter-spacing:var(--track-header);font-weight:800;font-size:13px;
  text-decoration:none;padding:12px 20px;}
.skip-link:focus{top:var(--s4);}

/* Section headers, nav, buttons, badges — the Archivo role. */
.u-header {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: var(--track-header);
  font-weight: 600;
}

/* Display type. Never more than four words. */
.u-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}