/* The Board — design tokens for QNN HQ
 *
 * Generated from the built screens in "Design Directions" turns 9–12 and
 * documented in "The Board — Design System". Drop this into
 * static/css/ and import it above base.css; every value base.css hard-codes
 * today has a variable here.
 *
 * Two rules that are not expressible as variables, and matter more than any
 * value below:
 *   1. --accent is a rule or a status word, never a fill.
 *   2. --action is the filled primary — one per panel, at most one per page.
 */

:root {
  /* ---- surfaces */
  --page:            #F7F5F1;
  --panel:           #FFFFFF;
  --panel-tint:      #EFEAE1;
  --rule:            #D8D3C9;
  --rule-inner:      #E7E2D9;
  --hairline:        #EAE5DC;

  /* ---- ink */
  --ink:             #20242A;
  --ink-mid:         #3E4752;
  --ink-muted:       #5A6470;

  /* ---- the masthead, and table header strips */
  --slate:           #20262E;
  --slate-ink:       #EDEFF2;
  --slate-nav:       #C7D2DE;
  --slate-meta:      #9FB2C6;
  --slate-divider:   #3B4552;
  --slate-outline:   #6F7E90;

  /* ---- meaning */
  --accent:          #A34E00;  /* the brand orange, straight from the logo SVG. Rules and status words only */
  --action:          #F5B84A;  /* the filled primary */
  --action-ink:      #20262E;  /* text on --action, always */
  --danger:          #B3271E;  /* failed; outline only */

  /* The logo carries two brighter oranges — #E35501 and #FE6E01 — that the UI
   * never uses: both fall under 4:1 on white, and --accent has to carry text.
   * They stay inside the logo files. */

  /* ---- interaction: focus is a ring outside the control, never a border swap */
  --focus:            #A34E00;  /* the ring on page and panel */
  --focus-on-slate:   #F5B84A;  /* on slate or in dark: #A34E00 is 1.6:1 there */
  --focus-on-action:  #20262E;  /* amber on amber is no ring at all */
  --focus-width:      3px;
  --focus-offset:     2px;      /* -2px when the row itself is the control */
  --action-hover:     #E8A93A;
  --action-active:    #DB9C2C;
  --wash-hover:       #EFEAE1;  /* hover is a wash, never a colour change */
  --wash-active:      #E7E2D9;
  --arrival:          600ms;    /* the only animation: a fading row edge */
  --success:         #17603A;  /* done, published; beside a word */

  /* ---- type */
  --font-name:  'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-data:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-title:        32px;  /* page title, --font-name 400 */
  --size-section:      25px;  /* section title, --font-name 600 */
  --size-object:       19px;  /* net name, card title, --font-name 600 */
  --size-person:       16px;  /* a person in a row, --font-name 600 */
  --size-lead:         16px;
  --size-body:         16px;
  --size-dense:        15px;  /* rows and dense panels */
  --size-meta:         14px;  /* the floor for readable text */
  --size-page-label:   14px;  /* sans 700, .12em, uppercase */
  --size-panel-label:  13px;  /* mono 600, .1em, uppercase */
  --size-figure:       28px;  /* a frequency, a headline count */
  --size-clock:        17px;  /* the elapsed clock, tabular */
  --size-callsign:     17px;  /* 16px in a list */

  --line-body: 1.55;
  --track-page-label: .12em;
  --track-panel-label: .1em;

  /* ---- space: the whole scale, nothing between */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* ---- geometry */
  --radius:          4px;
  --radius-badge:    2px;
  --target:          48px;  /* every control */
  --target-primary:  52px;
  --target-field:    56px;
  --border:          1px;
  --border-strong:   2px;   /* data inputs, toggles */
  --accent-rule:     5px;   /* the top rule on an accented panel */
  --current-edge:    4px;   /* left edge on the current row */

  --content-width:   1000px; /* reading pages */
  --desk-width:      1180px; /* run view, end of net */
  --masthead-height: 64px;
}

/* Dark keeps the frame by going down, not by inverting: the page drops and
 * the masthead drops further, so it stays the darkest band on screen. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --page:          #1A1F26;
    --panel:         #232A33;
    --panel-tint:    #262E37;
    --rule:          #39424E;
    --rule-inner:    #39424E;
    --hairline:      #2D353F;

    --ink:           #EDEFF2;
    --ink-mid:       #C7D2DE;
    --ink-muted:     #9FB2C6;

    --slate:         #141A21;
    --slate-divider: #39424E;

    --accent:        #F5B84A;  /* accent and action converge in dark */
    --focus:         #F5B84A;
    --wash-hover:    #2B323C;
    --wash-active:   #333B46;
    --danger:        #F3877E;
    --success:       #79D39B;
  }
}

/* Opting a subtree in explicitly, for a user-set preference. */
[data-theme='dark'] {
  color-scheme: dark;
  --page: #1A1F26; --panel: #232A33; --panel-tint: #262E37;
  --rule: #39424E; --rule-inner: #39424E; --hairline: #2D353F;
  --ink: #EDEFF2; --ink-mid: #C7D2DE; --ink-muted: #9FB2C6;
  --slate: #141A21; --slate-divider: #39424E;
  --accent: #F5B84A; --danger: #F3877E; --success: #79D39B;
}

/* Retired by this system — delete from base.css rather than restyling:
 *   .archive-table, .table-scroll   the wide-table-in-a-scroller pattern;
 *                                   replaced by two-line labelled rows,
 *                                   the departure board, and object blocks.
 *   section:nth-child(even) banding  it re-bands itself whenever a section
 *                                    is inserted.
 */