/* =====================================================================
   ORIENTED NETWORKS - Design tokens

   Every colour, size and timing in the site comes from here. Nothing
   downstream hardcodes a hex value.
   ===================================================================== */

:root {
  /* -------------------------------------------------------------------
     Colour

     The base is near-black with a faint warm cast rather than a neutral
     grey, because gold sitting on a cold black reads green at the edges.
     ------------------------------------------------------------------- */
  --ink:          #0A0908;  /* page background */
  --ink-raised:   #131110;  /* cards, panels */
  --ink-lift:     #1C1917;  /* hover and raised surfaces */
  --ink-sunk:     #060505;  /* footer, inset wells */
  --edge:         #2C2721;  /* hairlines, warm so they relate to gold */
  --edge-soft:    #1F1B17;  /* quieter dividers */

  --gold:         #C9A227;  /* the accent */
  --gold-lit:     #F2DA8B;  /* metallic highlight */
  --gold-deep:    #7E6014;  /* metallic shadow */
  --gold-ghost:   rgba(201, 162, 39, 0.12);
  --gold-veil:    rgba(201, 162, 39, 0.28);

  --paper:        #F7F5F1;  /* primary text, warm white */
  --paper-dim:    #A69E92;  /* secondary text */
  --paper-faint:  #8A8176;  /* captions, disabled. Passes AA at small sizes
                               on every surface it sits on: the page, a
                               card and the sunken footer. */

  /* Functional only. Never used decoratively. */
  --live:         #63D8A4;  /* screen online */
  --alert:        #E0705C;  /* form errors, offline */

  /* -------------------------------------------------------------------
     Metallic gold

     Flat gold looks like mustard. The brief asks for metallic, which
     means a gradient that runs shadow, core, highlight, core, shadow,
     the way light travels across a brushed surface.
     ------------------------------------------------------------------- */
  --metal: linear-gradient(
    100deg,
    var(--gold-deep) 0%,
    var(--gold) 20%,
    var(--gold-lit) 44%,
    var(--gold) 60%,
    var(--gold-deep) 100%
  );

  --metal-line: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-deep) 8%,
    var(--gold) 40%,
    var(--gold-lit) 52%,
    var(--gold) 64%,
    var(--gold-deep) 92%,
    transparent 100%
  );

  --metal-line-v: linear-gradient(
    180deg,
    transparent 0%,
    var(--gold-deep) 8%,
    var(--gold) 40%,
    var(--gold-lit) 52%,
    var(--gold) 64%,
    var(--gold-deep) 92%,
    transparent 100%
  );

  /* -------------------------------------------------------------------
     Type

     Archivo carries a width axis (62 to 125). Headings run expanded so
     they read like signage rather than a default UI font. Body sits at
     normal width. IBM Plex Mono handles labels, route codes and figures,
     which is honest for a product that produces play logs.
     ------------------------------------------------------------------- */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wdth-tight:   100;
  --wdth-wide:    112;
  --wdth-widest:  118;

  --size-hero:    clamp(2.75rem, 6.2vw, 5.5rem);
  --size-display: clamp(2.125rem, 4.2vw, 3.5rem);
  --size-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --size-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --size-h4:      1.0625rem;
  --size-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --size-body:    1.0625rem;
  --size-small:   0.9375rem;
  --size-fine:    0.8125rem;
  --size-label:   0.6875rem;
  --size-stat:    clamp(2.5rem, 5vw, 4rem);

  --lh-tight:     0.98;
  --lh-snug:      1.15;
  --lh-body:      1.65;

  --track-hero:   -0.025em;
  --track-head:   -0.015em;
  --track-label:  0.2em;
  --track-mono:   0.08em;

  /* -------------------------------------------------------------------
     Space
     ------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --section-y:  clamp(72px, 9vw, 132px);
  --container:  1200px;
  --container-narrow: 880px;
  --gutter:     clamp(20px, 5vw, 48px);

  /* -------------------------------------------------------------------
     Shape

     Mostly squared. Gold plus sharp corners reads as a plaque, which
     suits the brief better than the softer rounded look.
     ------------------------------------------------------------------- */
  --r-sm:   3px;
  --r-md:   5px;
  --r-lg:   8px;
  --r-pill: 999px;

  --hair: 1px;

  /* -------------------------------------------------------------------
     Depth
     ------------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 22px 54px rgba(0, 0, 0, 0.45);

  /* -------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    140ms;
  --t-base:    260ms;
  --t-slow:    520ms;
  --t-signal:  7s;      /* the pulse travelling along a route line */

  --z-nav:     100;
  --z-menu:    120;
  --z-top:     200;
}