/* ------------------------------------------------------------------------
   TOKENS. The whole design system's vocabulary, and nothing else.

   Rules that apply to this file:
   - Every colour is one of the 46 Apollo colours in docs/palette-apollo.json.
     Nothing else. Roles are named by job, not by hue, so a section can be
     retuned without renaming anything.
   - Every LanaPixel size is a whole multiple of 11px. That font is only sharp
     at 11, 22, 33, 44, 55, 66, 77, 88, 99. No clamp(), no vw, no em on it.
   - Breakpoints are 700px and 1280px. They are the only two.
   ------------------------------------------------------------------------ */

:root{

  /* --- colour roles. Source: docs/design-direction.md section 5. --------- */
  --void:          #090a14;  /* the page background, behind everything */
  --panel:         #10141f;  /* raised surfaces, input backgrounds */
  --panel-raised:  #151d28;  /* cards sitting on panels */
  --border-quiet:  #202e37;  /* hairlines and dividers */
  --border-active: #394a50;  /* a frame that needs to be seen */

  --ink:           #c7cfcc;  /* all body copy */
  --ink-bright:    #ebede9;  /* headlines only */
  --ink-muted:     #819796;  /* captions, footer, small print */

  --accent:        #e8c170;  /* the CTA, the lit words in a headline, charge */
  --accent-shade:  #de9e41;  /* a button's hard bottom edge, hover */
  --ember:         #da863e;  /* fire, the camp's warmth */

  --danger:        #a53030;  /* the boss. Station 4 and later only */
  --danger-hot:    #cf573c;  /* form errors, the boss's highlights */
  --success:       #75a743;  /* the waitlist success state */
  --success-bright:#a8ca58;  /* the success stamp's edge */

  --depth-far:     #172038;  /* headline shadow, the far end of the dungeon */
  --depth-near:    #253a5e;  /* the window fill gradient's bottom */

  --arcane:        #7a367b;  /* the wizard, and the Pact seal. Nothing else */
  --arcane-bright: #a23e8c;  /* the Pact seal's highlight */

  /* The two colours actually painted in art/ui/window.png. Read out of the
     file, both are Apollo. The frame is a 2px line: dark outside, bright in. */
  --frame-line:         #a4dddb;
  --frame-line-pressed: #73bed3;

  /* --- type ------------------------------------------------------------- */
  --face-pixel: 'LanaPixel', ui-monospace, monospace;
  --face-body:  ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;

  /* LanaPixel. Whole multiples of 11 only. Line heights in whole pixels. */
  --f-display: 44px;  --lh-display: 55px;
  --f-h2:      33px;  --lh-h2:      44px;
  --f-h3:      22px;  --lh-h3:      33px;
  --f-ui:      22px;  --lh-ui:      22px;
  --f-kicker:  11px;  --lh-kicker:  22px;  --tr-kicker: 3px;

  /* Sans-serif. Free to be any size, because it is not a pixel font. */
  --f-body:  17px;  --lh-body:  1.6;
  --f-small: 15px;  --lh-small: 1.5;

  /* --- space. One scale, used everywhere. ------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10:128px;

  --section-y: var(--sp-8);   /* the vertical rhythm between stations */
  --gutter:    20px;          /* the page's side margin */
  --wrap:      1120px;        /* the widest the copy column ever gets */
  --measure:   54ch;          /* about 54 characters, as the direction says */

  /* --- the app's window frame ------------------------------------------- */
  /* window.png is 13x13 with 6px corners, so the border must be a whole
     multiple of 6: 12px is 2x, 18px is 3x. Only those two, ever. */
  --frame-w: 12px;
}

@media (min-width: 700px){
  :root{
    --f-display: 66px;  --lh-display: 77px;
    --f-h2:      44px;  --lh-h2:      55px;
    --f-body:    19px;  --lh-body:    1.65;
    --section-y: var(--sp-9);
    --gutter:    var(--sp-6);
    --frame-w:   18px;
  }
}

@media (min-width: 1280px){
  :root{
    --f-display: 88px;  --lh-display: 99px;
    --f-h2:      55px;  --lh-h2:      66px;
    --section-y: var(--sp-10);
  }
}