/* =====================================================================
   A-O — tokens
   ---------------------------------------------------------------------
   The single place where a value is decided. Nothing else in the site
   writes a raw colour, a raw shadow or a raw duration: if a number
   appears twice, it belongs here.

   Two zones share one token set and swap a handful of values:
     LOG        Source Code Pro, heavy on titles
     BLACK-LOG  Press Start 2P — a pixel face, much wider per glyph,
                so display type shrinks hard and tracking goes away

   Reference: DECISIONS.md sections 1, 6, 7.
   ===================================================================== */

:root{

  /* ------------------------------------------------------------ ink */
  --ink:#000;
  --paper:#fff;

  /* The accent is grey, slightly violet. No cyan anywhere in the site. */
  --vio:#9d97ad;
  --vio-dim:#6d6879;
  --vio-deep:#3d3947;

  --rose:#ff2f9b;

  --grey-0:#1a1a1c;
  --grey-1:#2e2f33;
  --grey-2:#55575e;
  --grey-3:#8b8d94;

  /* One single grey for the A-O logo, identical in both zones. */
  --ens:#8b8d94;

  --rainbow:linear-gradient(90deg,#ff4d4d,#ffa64d,#ffe14d,#4dff88,#4dd2ff,#7a5cff,#ff4dd2);

  --ground-log:radial-gradient(120% 90% at 50% 45%, #6a6c72 0%, #3c3d42 42%, #232427 100%);
  --ground-blk:radial-gradient(120% 90% at 50% 45%, #232529 0%, #0d0d0f 45%, #000 100%);

  /* --------------------------------------------------------- letters */
  --face-log:'Source Code Pro', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --face-pixel:'Press Start 2P', ui-monospace, Consolas, 'Courier New', monospace;

  --font:var(--face-log);   /* display type of the current zone       */
  --mono:var(--face-log);   /* small chrome type of the current zone  */
  --scale:1;                /* display type multiplier, per zone      */
  --ui:1;                   /* chrome type multiplier, per zone       */
  --track:.22em;            /* letter-spacing on small caps           */

  --step-display:clamp(24px,4.4vw,64px);
  --step-title:clamp(13px,1.6vw,26px);
  --step-body:clamp(10px,1.14vw,18px);
  --step-chrome:clamp(10px,.86vw,14px);
  --leading-body:2.1;

  /* ---------------------------------------------------------- shapes
     Section 1: nothing is rounded. Rectangles are rectangles and line
     ends are cut square. Shapes that ARE round — circles, discs,
     particles — stay round, and opt back in through --round.        */
  --radius:0;
  --round:50%;
  --edge:6px;               /* the thick border of the error box      */
  --hair:1px;

  /* --------------------------------------------------------- shadows
     Section 1: a drop shadow around almost everything. Three depths,
     so "almost everything" does not become "everything identically".

     --lift   panels, tiles, sliders — the thing floats off the ground
     --raise  forms and boxes that sit above a panel
     --press  the shallow one, for bars and buttons                   */
  --lift:0 20px 44px -14px rgba(0,0,0,.78), 0 3px 10px rgba(0,0,0,.45);
  --raise:0 14px 30px -10px rgba(0,0,0,.72), 0 2px 6px rgba(0,0,0,.40);
  --press:0 4px 12px -4px rgba(0,0,0,.62);
  --glow:0 0 18px rgba(157,151,173,.42);

  /* ----------------------------------------------------------- time
     Section 6 halves the A-O button. Every duration it depends on is
     derived from --sing, so halving happens once, here.             */
  --sing:1500ms;      /* dwell before the disc opens — was 3000ms */
  --sing-open:575ms;  /* the disc grows               — was 1150ms */
  --sing-rush:235ms;  /* the black floods the page    — was  470ms */

  --t-fast:120ms;
  --t-swap:160ms;
  --t-slide:600ms;
  --t-cross:520ms;    /* the fade when one couple passes in front */
  --t-page:420ms;

  --ease-out:cubic-bezier(.4,.02,.2,1);
  --ease-slide:cubic-bezier(.5,0,.15,1);
  --ease-suck:cubic-bezier(.62,0,.78,.28);

  /* ---------------------------------------------------------- layers
     Declared once and in order, so no page invents a z-index.      */
  --z-dust:0;
  --z-board:1;
  --z-fog:5;          /* section 7: the fog is allowed over the tiles */
  --z-logo:40;
  --z-chrome:60;
  --z-error:75;
  --z-overlay:80;
  --z-veil:90;
  --z-refusal:99;
}

/* Press Start 2P is a pixel face. It wants small round sizes and no
   tracking; display type shrinks hard, chrome barely moves. */
body.pixel{
  --font:var(--face-pixel);
  --mono:var(--face-pixel);
  --scale:.58;
  --ui:.8;
  --track:.04em;
}

/* Someone who asked for less motion gets less motion — the site still
   works, it just stops drifting. */
@media (prefers-reduced-motion:reduce){
  :root{
    --t-cross:0ms;
    --t-slide:0ms;
  }
}