/* nx-tokens.css — GENERATED by gen-tokens.js from src/00-tokens.css.
   Do not edit; edit the source.

   The declarations only: :root, the dark theme, the compact density, and the
   Inter face with an ABSOLUTE path. The element rules in the source — html and
   body, :focus-visible — are deliberately absent, because this file is LINKED
   into app.html and control.html and those pages have their own.

   tokens.js asserts this is a faithful subset of the source. */

:root {
  color-scheme: light;

  /* ---- surfaces ------------------------------------------ */
  --nx-bg:          #F4F7FA;   /* page ground                 */
  --nx-surf:        #FFFFFF;   /* cards, panes, table body    */
  --nx-surf-2:      #F8FAFC;   /* table head, hover, sunk row */
  --nx-sunk:        #EDF2F7;   /* search field, segmented bg  */
  --nx-rail:        #12293F;   /* the navy rail. Not --brand. */

  /* ---- lines --------------------------------------------- */
  --nx-line:        #E1E8EF;   /* component borders           */
  --nx-line-2:      #EFF3F7;   /* row dividers inside a card  */

  /* ---- ink ----------------------------------------------- */
  --nx-ink:         #12283C;   /* headings, primary text      */
  --nx-ink-2:       #3A5065;   /* body, secondary text        */
  --nx-muted:       #647A8E;   /* labels, meta, placeholders  */

  /* ---- brand --------------------------------------------- */
  /* This is THE brand blue. The ΔE 14.9 orange split between
     styles.css and app.html is resolved by --nx-accent below;
     nothing should reference a raw orange hex after this file
     is adopted. */
  --nx-brand:       #2A5A85;
  --nx-brand-hover: #34688F;
  --nx-tint:        #EAF2F8;   /* brand at 8%, for selection  */
  --nx-on-brand:    #FFFFFF;   /* text on a brand fill        */

  /* ---- status -------------------------------------------- */
  /* Meaning, not decoration:
     bad  = costs money today        warn = slipping
     good = cleared                  accent = attention, not alarm */
  --nx-bad:         #B3384F;
  --nx-warn:        #96690A;
  --nx-good:        #147B63;
  --nx-accent:      #C6720F;
  --nx-bad-bg:      #FBEEF0;
  --nx-warn-bg:     #FAF3E3;
  --nx-good-bg:     #E7F4F0;

  /* ---- people (avatar fills) ----------------------------- */
  --nx-person-a:    #2A5A85;
  --nx-person-b:    #147B63;
  --nx-person-c:    #6B4E9E;
  --nx-person-d:    #C6720F;
  --nx-person-e:    #177D82;

  /* ---- type ---------------------------------------------- */
  /* One family. Headings, figures and body are all Inter,
     separated by size, weight and tracking rather than family.
     Decided 15 Aug: no display serif on the paid desk. */
  --nx-font:        Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-font-figure: var(--nx-font);   /* kept as a seam, in case
                                         a tabular face is ever
                                         introduced for money    */
  --nx-display-weight: 600;
  --nx-display-track:  -0.021em;

  --nx-f-xs:  11px;
  --nx-f-sm:  12.5px;
  --nx-f-md:  13.5px;   /* body default */
  --nx-f-lg:  15px;
  --nx-f-xl:  19px;
  --nx-f-2xl: 26px;     /* record headline */
  --nx-f-3xl: 34px;     /* page title */

  /* ---- shape --------------------------------------------- */
  --nx-radius-sm:   5px;
  --nx-radius:      9px;
  --nx-radius-lg:   13px;
  --nx-radius-pill: 999px;
  --nx-bar-radius:  2px;    /* gauge tracks and ticks */

  /* ---- space --------------------------------------------- */
  --nx-s1: 4px;  --nx-s2: 8px;  --nx-s3: 12px; --nx-s4: 16px;
  --nx-s5: 20px; --nx-s6: 24px; --nx-s7: 32px; --nx-s8: 44px;

  /* ---- controls ------------------------------------------ */
  --nx-btn-h:     40px;
  --nx-btn-pad:   10px 15px;
  --nx-cell-pad:  12px 13px;
  --nx-head-pad:  11px 13px;

  /* ---- elevation ----------------------------------------- */
  --nx-shadow-1: 0 1px 2px rgba(16,40,63,.06);
  --nx-shadow-2: 0 1px 2px rgba(16,40,63,.06), 0 6px 16px -8px rgba(16,40,63,.14);
  --nx-shadow-3: 0 8px 24px -8px rgba(16,40,63,.18), 0 32px 64px -24px rgba(16,40,63,.20);

  /* ---- motion -------------------------------------------- */
  --nx-t: 120ms;
  --nx-ease: cubic-bezier(.2, 0, 0, 1);

  /* ---- shell metrics ------------------------------------- */
  --nx-rail-w:   64px;    /* icon rail                        */
  --nx-queue-w:  380px;   /* the list pane                    */
}

[data-theme="dark"] {
  color-scheme: dark;

  --nx-bg:          #0A1723;
  --nx-surf:        #112232;
  --nx-surf-2:      #15293B;
  --nx-sunk:        #0E2030;
  --nx-rail:        #07121C;

  --nx-line:        #1E3549;
  --nx-line-2:      #182C3E;

  --nx-ink:         #E6EEF6;
  --nx-ink-2:       #B7C8D8;
  --nx-muted:       #8AA0B4;

  --nx-brand:       #6FA3CE;
  --nx-brand-hover: #84B3D9;
  --nx-tint:        #16304766;
  --nx-on-brand:    #08131E;

  --nx-bad:         #E8899B;
  --nx-warn:        #DCB45E;
  --nx-good:        #5FC3A8;
  --nx-accent:      #E09A45;
  --nx-bad-bg:      #2C1A21;
  --nx-warn-bg:     #2A2416;
  --nx-good-bg:     #123029;

  --nx-shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --nx-shadow-2: 0 1px 2px rgba(0,0,0,.40), 0 6px 16px -8px rgba(0,0,0,.60);
  --nx-shadow-3: 0 8px 24px -8px rgba(0,0,0,.60), 0 32px 64px -24px rgba(0,0,0,.70);
}

[data-density="compact"] {
  --nx-f-md:     13px;
  --nx-f-sm:     12px;
  --nx-btn-h:    34px;
  --nx-btn-pad:  8px 12px;
  --nx-cell-pad: 7px 11px;
  --nx-head-pad: 8px 11px;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;          /* variable axis, not four faces */
  font-display: swap;            /* text is readable before it lands */
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}