/* =============================================================
 * Nera Competitions Design System v2 — Colours & Type
 * Source of truth for competition child projects.
 *
 * What changed from v1, and why:
 *   1. No default brand hue. v1 shipped #1313ec, so a project that
 *      forgot to override inherited somebody else's blue. The
 *      placeholder here is grey, so a missing override looks
 *      unbranded rather than wrong.
 *   2. No bundled typefaces. v1 imported Plus Jakarta Sans and
 *      Material Symbols from Google. Typeface is a per-client
 *      decision and a shipped default becomes a shared tell.
 *   3. No decorative gradients. v1 carried four, and the indigo
 *      inside one of them reached a client build and tripped the
 *      slop scanner even though nothing referenced it.
 *   4. Dark canvas by default, because every competition site we
 *      have built is dark. Light values are here to switch to.
 *   5. Small radii. 32px rounding on everything is a tell.
 *   6. Tabular numerals are not optional. Ticket numbers, counts
 *      and countdowns must not jitter as they change.
 * ============================================================= */

:root {
  /* -------- Brand: every child project MUST set these ---------
     Left deliberately neutral. If a site ships looking grey, the
     override was missed, which is the failure you want to see. */
  --brand:        #8E8E9A;
  --brand-hover:  #A5A5B0;
  --brand-ink:    #FFFFFF;   /* text on --brand, check contrast per brand */

  /* -------- Canvas: dark is the default -----------------------
     Five steps, not three. Competition cards sit on a surface that
     sits on a canvas, and two greys cannot carry that. */
  --bg:        #0B0B0D;
  --surface-1: #101014;
  --surface-2: #121216;
  --surface-3: #1A1A20;
  --line:      #26262E;

  /* -------- Text ---------------------------------------------- */
  --text:    #F5F5F7;   /* 18.1:1 on --bg */
  --text-2:  #B4B4BE;   /*  9.4:1 */
  --text-3:  #7C7C88;   /*  4.6:1, the floor. Never smaller than 13px */
  --text-on-brand: var(--brand-ink);

  /* -------- Competition state ---------------------------------
     These are states, not decoration. Every one appears on a card,
     and they must stay distinguishable in greyscale as well as in
     colour, because the brand colour is usually also the CTA. */
  --state-live:      var(--brand);
  --state-closing:   #FFB020;   /* amber. Urgency, never red */
  --state-soldout:   #7E7E86;   /* grey, desaturated card */
  --state-drawn:     #BFA14F;   /* gold hairline, winner named */
  --state-members:   #BFA14F;
  --state-instant:   #D6C08A;
  --state-error:     #FFB020;   /* amber, so red stays the action */
  --state-ok:        #4FA76A;

  /* -------- Type: roles, not faces -----------------------------
     Set the three faces per client. Fallbacks are system stacks so
     an unset face degrades legibly instead of silently. */
  --font-display: "__SET_PER_CLIENT__", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "__SET_PER_CLIENT__", ui-sans-serif, system-ui, sans-serif;
  --font-numeric: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px;
  --fs-lg: 21px; --fs-xl: 25px; --fs-2xl: 30px; --fs-3xl: 36px;
  --fs-4xl: 44px; --fs-5xl: 52px; --fs-6xl: 60px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --lh-tight: .98; --lh-snug: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.6;
  --track-display: .01em;   /* condensed display faces need a little */
  --track-label:   .14em;   /* uppercase labels only */
  --track-eyebrow: .16em;

  /* -------- Radius: small on purpose -------------------------- */
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 6px;

  /* -------- Elevation ------------------------------------------
     Dark surfaces separate by border and tone, not by shadow.
     One shadow, for things that genuinely float. */
  --shadow-float: 0 20px 50px -20px rgba(0,0,0,.7);

  /* -------- Spacing: a rhythm with two registers ---------------
     Micro inside a component, macro between bands. A single
     uniform gap everywhere is one of the measured slop tells. */
  --space-1: 4px;  --space-2: 7px;  --space-3: 10px; --space-4: 14px;
  --space-5: 18px; --space-6: 24px; --space-8: 32px; --space-10: 44px;
  --space-12: 56px; --space-16: 80px;

  --gutter: 16px;        /* 32px from 900px up */
  --measure: 1280px;

  /* -------- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);
  --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 520ms;
}

/* Light canvas, for a client who wants one. Same token names, so
   nothing downstream changes. */
[data-theme="light"] {
  --bg:#F7F7F9; --surface-1:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#F1F1F4;
  --line:#E2E2E8; --text:#111116; --text-2:#4B4B57; --text-3:#6E6E7A;
}

/* =============================================================
 * Reset. Small and deliberate, but not optional: without the
 * border-box line every `width:100%` with padding overflows its
 * parent, which is exactly what it did on the first child project
 * built against v2.
 * ============================================================= */
*, *::before, *::after{ box-sizing:border-box }
img, svg, video, canvas{ display:block; max-width:100% }
button, input, select, textarea{ font:inherit; color:inherit }

/* =============================================================
 * Element defaults
 * ============================================================= */
body{
  margin:0; background:var(--bg); color:var(--text-2);
  font-family:var(--font-body); font-size:var(--fs-base);
  line-height:var(--lh-normal); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text); margin:0;
             letter-spacing:var(--track-display); }
h1{ font-size:clamp(32px,7vw,var(--fs-6xl)); line-height:var(--lh-tight); font-weight:var(--fw-bold) }
h2{ font-size:clamp(25px,4vw,var(--fs-3xl)); line-height:var(--lh-snug); font-weight:var(--fw-bold) }
h3{ font-size:var(--fs-lg); line-height:var(--lh-snug); font-weight:var(--fw-bold) }
h4{ font-size:var(--fs-md); line-height:var(--lh-snug); font-weight:var(--fw-semibold) }
p{ margin:0; line-height:var(--lh-relaxed) }
a{ color:var(--brand); text-decoration:none; transition:color var(--dur-fast) var(--ease-out) }
a:hover{ color:var(--text) }
small{ font-size:var(--fs-sm); color:var(--text-3) }

/* Every number a player might check. Tabular so nothing jitters. */
.num, .ticket, .countdown, .price, .count{
  font-family:var(--font-numeric); font-variant-numeric:tabular-nums;
}

/* Uppercase is for labels and eyebrows, never headlines. */
.eyebrow{
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--fs-xs); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--text-3);
}
.label{
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--fs-xs); letter-spacing:var(--track-label);
  text-transform:uppercase;
}

::selection{ background:var(--brand); color:var(--text-on-brand) }

@media (min-width:900px){ :root{ --gutter:32px } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}