/* GENERATED FILE - DO NOT EDIT.
   Emitted from src/gencharts/design_tokens.py. Regenerate with `make tokens`.

   Loads before style.css because Dash serves assets in filename order and "_"
   sorts ahead of letters (the same trick zstyles.css uses to load last). So
   style.css can consume every var below, and override where it needs to.

   Edit the Python module, not this file. */

:root {
    /* Surfaces */
    /* Three fills with one job each: chrome, page, card. Zebra and hover are states of the card and only ever appear inside a grid. */
    --surface-chrome:   #111117;  /* navbar / sidebar / footer band */
    --surface-page:     #17171e;  /* page background */
    --surface-card:     #1c1c24;  /* card + chart surface */
    --surface-raised:   #23232c;  /* zebra stripe — 1.08 on card */
    --surface-hover:    #30303d;  /* grid row hover — 1.30 on card */
    --surface-control:  #1c1c24;  /* floating parts: dropdown, calendar — one step above page */
    --surface-field:    transparent;  /* resting input fill (ADR-03) */
    --surface-sidebar:  #111117;  /* sidebar fill — chrome band (ADR-03) */
    --surface-header:   #17171e;  /* grid header/footer band = page */

    /* Text */
    /* Page ramp. Chrome and card redefine the same names below. */
    --text-strong:          #e0e0e2;  /* headings — 13.53:1 on page */
    --text-color:           #c7c7cb;  /* body — 10.58:1 on page */
    --inactive-text-color:  #8f8f98;  /* muted — 5.56:1 on page */
    --text-faint:           #63636d;  /* disabled, placeholder — 3.00:1 on page */
    --hover-text-color:     #222222;  /* text on a light/inverted fill */
    --divider:              #2e2e32;  /* grid + table + zeroline rule — 1.25 on card */

    /* Accent */
    /* Five competing accents today. GC-270 proposes achromatic chrome with a single brand colour confined to mark, favicon, navbar and focus ring. */
    --primary-color:    #003f5c;  /* colors.NAVY — brand only since ADR-01 */
    --secondary-color:  #fd9d51;
    --tertiary-color:   #9ecbed;  /* colors.PALE_BLUE — public hyperlink blue */

    /* Typography */
    /* IBM Plex Sans, self-hosted. The system tail is deliberate: falling back to a second webfont would mean shipping both forever. */
    --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;  /* body, headings, labels */
    --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* numbers as data: table cells, ticks, hovers, KPI figures */

    /* Type ramp */
    /* Six page roles in rem, so they follow the reader's own browser font size. Chart furniture (title, subtitle, key) is px: it sits in a fixed grid cell above figure text drawn from Python literals. */
    --type-page-title:         2rem;  /* 32px at a 16px root */
    --weight-page-title:       600;
    --leading-page-title:      1.15;
    --type-section:            1.5rem;  /* 24px at a 16px root */
    --weight-section:          600;
    --leading-section:         1.25;
    --type-body:               1rem;  /* 16px at a 16px root */
    --weight-body:             400;
    --leading-body:            1.5;
    --type-link:               0.9375rem;  /* 15px at a 16px root */
    --weight-link:             400;
    --leading-link:            1.5;
    --type-caption:            0.9375rem;  /* 15px at a 16px root */
    --weight-caption:          400;
    --leading-caption:         1.4;
    --type-source:             0.875rem;  /* 14px at a 16px root */
    --weight-source:           400;
    --leading-source:          1.4;
    --type-nav:                0.875rem;  /* sidebar link - chrome, 14px at a 16px root */
    --type-card-title:         20px;  /* titles whatever a card holds: figure, grid or table */
    --weight-card-title:       600;
    --leading-card-title:      1.3;
    --type-chart-subtitle:     16px;  /* scale caveat - muted, not small */
    --weight-chart-subtitle:   400;
    --leading-chart-subtitle:  1.4;
    --type-legend:             14px;  /* hoisted key - matches the figure it belongs to */
    --type-label:              13px;  /* small UI label: toggles, dense headers, key labels */
    --type-subhead:            14px;  /* small heading inside a card, above a table or grid */
    --type-table:              13px;  /* hand-built data table cell and header - matches --ag-font-size */
    --type-kpi:                24px;  /* a stat value rendered as type; data, so px */
    --type-kpi-sm:             18px;  /* secondary stat value in a row of them */
    --type-state-prompt:       18px;  /* 'pick a unit' - an instruction, in place of a chart */
    --type-state-empty:        16px;  /* 'no data available' - recedes, in place of a chart */
    --type-banner:             0.875rem;  /* full-width notification strip */
    --type-control:            0.9rem;  /* text inside an input, select or date field */
    --type-icon-btn:           1.1rem;  /* glyph in an icon button, e.g. the help '?' */
    --type-brand:              1.5rem;  /* the GenCharts wordmark — 24px, between nav links and page title */

    /* Space and shape */
    /* A 4px ladder, and four semantic gaps that sit on it. The gap grows with the size of the break: within a grid < between page blocks < before a new section. */
    --space-1:               4px;
    --space-2:               8px;
    --space-3:               12px;
    --space-4:               16px;
    --space-5:               24px;
    --space-6:               32px;
    --space-7:               48px;
    --gc-gutter:             var(--space-6);  /* between cards in one grid — 32px */
    --gap-block:             var(--space-6);  /* between page-level blocks — 32px */
    --gap-section:           var(--space-7);  /* before a section heading — 48px */
    --gap-heading:           var(--space-3);  /* heading to the thing it labels — 12px */
    --gap-rule:              var(--space-4);  /* either side of a horizontal rule — 16px */
    --corner-radius:         0;  /* the corners are the point — keep them square */
    --card-border:           var(--hairline-width) solid #28282b;  /* card edge — 1.15 on card */
    --gc-card-max:           720px;  /* widest a single chart card may render */
    --gc-card-max-narrow:    580px;  /* card cap for small-multiple grids */
    --hairline-width:        1px;  /* surface-boundary hairlines (CSS only) */
    --control-border-color:  #63636d;  /* resting control edge — 3.00 on page, tint 0.35 */
    --control-glyph:         #4d4d58;  /* tick on a light control fill — 4.85:1 */
    --chrome-rule:           var(--hairline-width) solid #242427;  /* every chrome boundary: navbar, sidebar, footer — 1.15 on page */

    /* Public section */
    /* Shared content boundary the header, footer and landing align to. */
    --gc-public-max:   1100px;  /* public content measure */
    --gc-public-font:  1rem;  /* public base size - rem so it follows the reader (ADR-05) */

    /* Charts */
    /* Since ADR-02 the figure paints nothing - `paper_bgcolor` is transparent and the card wrapper owns the chart surface, so these are the only description of what a chart looks like from the outside. */
    --chart-text:      #ccccd0;  /* figure text — body on the card, 10.57:1 */
    --line-reference:  #93939c;  /* demoted context — muted on card, 5.56:1 */
    --line-actual:     #e44900;  /* outturn against forecast — warm, 4.23:1 */
    --line-summary:    #e6e6e8;  /* aggregate over a stack — strong on card, 13.58:1 */
    --line-casing:     #0d0d12;  /* rim under a summary line — 3.21:1 on every fill, 1.15 on card */
    --chart-radius:    2px;  /* chart card corner (ADR-02, re-cut 09-17) */
    --control-radius:  2px;  /* control + floating panel corner */
    --chart-border:    var(--hairline-width) solid #28282b;  /* chart card edge — 1.15 on card */
}

.navbar, #sidebar-col, .gc-app-footer, .gc-public-footer, .gc-public-header, .offcanvas {
    /* Text on chrome */
    /* Same four roles, solved against --surface-chrome (#111117). */
    --text-strong:          #dbdbde;  /* headings — 13.51:1 on chrome */
    --text-color:           #c1c1c8;  /* body — 10.53:1 on chrome */
    --inactive-text-color:  #8a8a95;  /* muted — 5.52:1 on chrome */
    --text-faint:           #60606a;  /* disabled, placeholder — 3.03:1 on chrome */
}

.gc-chart-card, .gc-chart-surface, .gc-summary-table, .ag-theme-alpine, .gc-markdown td {
    /* Text on a card */
    /* Same four roles, solved against --surface-card (#1c1c24). */
    --text-strong:          #e6e6e8;  /* headings — 13.58:1 on card */
    --text-color:           #ccccd0;  /* body — 10.57:1 on card */
    --inactive-text-color:  #93939c;  /* muted — 5.56:1 on card */
    --text-faint:           #676770;  /* disabled, placeholder — 3.02:1 on card */
}

.mantine-Popover-dropdown, .dropdown-menu {
    /* Text on a floating control */
    /* Same four roles, solved against --surface-control (#1c1c24). */
    --text-strong:          #e6e6e8;  /* headings — 13.58:1 on the control fill */
    --text-color:           #ccccd0;  /* body — 10.57:1 on the control fill */
    --inactive-text-color:  #93939c;  /* muted — 5.56:1 on the control fill */
    --text-faint:           #676770;  /* disabled — 3.02:1 on the control fill */
}