/* AS1 design tokens.

   Reconciled from the two BASIC guidelines against the tokens.css that cf1
   already ships, which is where that argument was settled once already. Where
   the guidelines disagree: the deck's #1E5DEB wins over the document spec's
   #2563EB (cf1 ships it, and the deck marks its block "exact Pencil colors"),
   while the document spec wins on type and on the spacing scale.

   Dark, single theme, no toggle. Every live BASIC web app is dark and none has
   ever shipped light; the guidelines read light only because they are print
   specs. Contrast is tuned for a screen share, where video compression crushes
   low-contrast greys: readable copy never goes below --text-secondary. */

/* Self-hosted, latin subset, 80KB for all four faces. Deliberately not Google
   Fonts: on a client guest wifi or behind their firewall a CDN link costs the
   app its typography mid-meeting. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
           src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
           src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
           src:url('/assets/fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
           src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}

:root{
    /* Without this the native select popups render in the browser light chrome
       on any machine whose OS is not set to dark. */
    color-scheme: dark;

    /* Surfaces. Depth is a surface step plus a hairline, never a shadow. */
    --bg:            #0A0A0A;
    --bg-sunk:       #070707;   /* inputs, progress track */
    --bg-card:       #131314;   /* the card surface; all contrast validated here */
    --bg-elevated:   #1A1A1C;   /* table head, chips */
    --bg-hover:      #202023;   /* row and nav hover */

    /* Borders: three weights, all 1px. */
    --border:        #262629;
    --border-light:  #34343A;
    --border-strong: #45454D;

    /* Ink. --text-secondary is the floor for anything a reader must read. */
    --text:           #FAFAFA;
    --text-secondary: #A6A6AE;  /* 7.7:1 on --bg-card */
    --text-tertiary:  #6E6E78;  /* 3.7:1 - decorative only, never prose */
    --text-dim:       #4A4A52;  /* placeholders */

    /* BASIC blue. Chrome only: never a large field, never a series colour. */
    --accent:        #1E5DEB;
    --accent-hover:  #3B74F0;   /* the only variant safe as text on dark */
    --accent-press:  #1848B8;
    --accent-dim:    rgba(30, 93, 235, .16);
    --accent-line:   rgba(30, 93, 235, .45);

    /* Status. Reserved: never reused decoratively, never colour alone. */
    --success:     #22C55E;  --success-dim: rgba(34, 197, 94, .14);
    --warning:     #F59E0B;  --warning-dim: rgba(245, 158, 11, .14);
    --danger:      #FF5A5A;  --danger-dim:  rgba(255, 90, 90, .14);

    /* Data series. A fifth category folds to --c-other, it never cycles. */
    --c1:#3987E5; --c2:#D95926; --c3:#199E70; --c4:#C98500; --c-other:#6E6E78;

    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px;
    --sp-xl:32px; --sp-2xl:48px; --sp-3xl:64px;

    --radius-sm:4px; --radius:8px; --radius-lg:12px;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
    --transition: 140ms ease;

    --sidebar-w:248px; --topbar-h:60px; --content-max:1480px;

    /* Net new: neither reference app nor either guideline has a focus style. */
    --focus-edge: var(--accent);
    --focus-ring: 0 0 0 3px var(--accent-dim);
}