/* =============================================================================
   ADMIN — TOKEN LAYER
   Deliberately independent from the public site: the control panel keeps one
   stable identity no matter which theme or brand colour the forum is running,
   so an operator's muscle memory survives a rebrand.
   ============================================================================= */

:root {
    --tk-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tk-font-display: var(--tk-font-sans);
    --tk-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', monospace;

    --tk-canvas: #eceef2;
    --tk-surface: #ffffff;
    --tk-surface-raised: #ffffff;
    --tk-surface-sunken: #f4f5f7;
    --tk-surface-inverse: #1a2030;

    --tk-fg: #1a2030;
    --tk-fg-muted: #4d586b;
    --tk-fg-subtle: #8792a4;
    --tk-fg-inverse: #ffffff;

    --tk-line: #d8dce3;
    --tk-line-strong: #c3cad4;

    --tk-primary: #1e3a5f;
    --tk-primary-fg: #ffffff;
    --tk-accent: #2f6fa8;

    --tk-success: #15803d;
    --tk-warning: #b45309;
    --tk-danger: #be123c;
    --tk-info: #0369a1;

    /* Barely rounded. The panel reads as panes of one grid; a soft corner reads
       as a card floating above it. */
    --tk-radius-control: 0.1875rem;
    --tk-radius-card: 0.25rem;
    --tk-radius-panel: 0.25rem;
    --tk-radius-pill: 999px;

    /* Flat by design — depth comes from hairlines and surface steps. */
    --tk-shadow-card: none;
    --tk-shadow-raised: 0 1px 2px rgb(26 32 48 / 0.06);
    --tk-shadow-overlay: 0 10px 32px -10px rgb(26 32 48 / 0.28);

    /* Navigation in two tiers: a dark rail of sections, and a light panel
       holding the pages of whichever one is open. */
    --tk-nav-bg: #232a36;
    --tk-nav-fg: #e8ecf2;
    --tk-nav-fg-muted: #8e99ab;
    --tk-nav-line: #2f3746;
    --tk-nav-hover: #2c3442;
    /* The open section's chip is painted in the panel's own colour, so the two
       tiers read as one shape rather than two lists side by side. */
    --tk-nav-active-bg: #f4f5f7;
    --tk-nav-active-fg: #232a36;

    --tk-nav-panel-bg: #f4f5f7;
    --tk-nav-panel-fg: #1a2030;
    --tk-nav-panel-fg-muted: #4d586b;
    --tk-nav-panel-line: #d8dce3;
    --tk-nav-panel-hover: #e5e8ee;

    /* Chart series, kept apart from the semantic colours. A status hue means one
       thing wherever it appears, and the brand teal is too low in chroma to read
       as a line against a gridline. These four are checked for lightness, chroma
       and colour-blind separation against the surface they are drawn on. */
    --tk-chart-1: #2563eb;
    --tk-chart-2: #0d9488;
    --tk-chart-3: #d97706;
    --tk-chart-4: #be185d;

    --tk-nav-rail-width: 3.25rem;
    --tk-nav-panel-width: 12.25rem;
    /* Both tiers together, so the shell keeps reserving one gutter. */
    --tk-nav-width: 15.5rem;
    --tk-nav-width-collapsed: var(--tk-nav-rail-width);

    --tk-topbar-height: 3.25rem;
    --tk-row-py: 0.375rem;
    --tk-row-px: 0.625rem;
}

:root {
    --tk-primary-hover: color-mix(in oklab, var(--tk-primary) 88%, #000);
    --tk-primary-active: color-mix(in oklab, var(--tk-primary) 78%, #000);
    --tk-primary-soft: color-mix(in oklab, var(--tk-primary) 9%, var(--tk-surface));
    --tk-accent-soft: color-mix(in oklab, var(--tk-accent) 10%, var(--tk-surface));

    --tk-success-soft: color-mix(in oklab, var(--tk-success) 11%, var(--tk-surface));
    --tk-warning-soft: color-mix(in oklab, var(--tk-warning) 13%, var(--tk-surface));
    --tk-danger-soft: color-mix(in oklab, var(--tk-danger) 10%, var(--tk-surface));
    --tk-info-soft: color-mix(in oklab, var(--tk-info) 11%, var(--tk-surface));

    /* The open section's chip. Derived rather than picked, so the colour an
       operator sets in Settings reaches the sidebar too; the foreground is
       darkened off the same value rather than trusting it to be dark. */
    --tk-nav-panel-active-bg: color-mix(in oklab, var(--tk-primary) 12%, var(--tk-nav-panel-bg));
    --tk-nav-panel-active-fg: color-mix(in oklab, var(--tk-primary) 85%, #000);

    /* A field is drawn exactly like the topbar search: the sunken step every
       toolbar and table head already uses, the same hairline as the cards and
       the nav panel, and nothing else. Flat on purpose — a dent or a heavier
       edge would make the one element on the panel built from another kit.
       Focus lifts the fill to the surface and moves the border; the halo the
       primitives ship with is what reads as an app, not a control panel.
       A locked field loses the fill, so nothing about it invites a cursor. */
    --tk-field-bg: var(--tk-surface-sunken);
    --tk-field-bg-focus: var(--tk-surface);
    --tk-field-line: var(--tk-line);
    --tk-field-disabled-bg: var(--tk-canvas);

    /* Sized like the topbar search, and read at the size the tables are. The
       measure holds about fifty characters — two and a half times the longest
       name anything on this install actually has. */
    --tk-field-height: 2rem;
    --tk-field-font-size: 0.8125rem;
    --tk-field-px: 0.625rem;
    --tk-field-measure: 24rem;
    --tk-field-textarea-min: 4rem;
}

.dark {
    /* Lifted so links, badges and focus rings stay readable on the dark
       surfaces; buttons flip to dark text on the lighter fill. */
    --tk-primary: #5b9be0;
    --tk-primary-fg: #0b1220;
    --tk-accent: #6aa9e8;

    --tk-canvas: #0d111a;
    --tk-surface: #141a26;
    --tk-surface-raised: #19212f;
    --tk-surface-sunken: #10161f;
    --tk-surface-inverse: #e9edf5;

    --tk-fg: #e9edf5;
    --tk-fg-muted: #9aa5bb;
    --tk-fg-subtle: #6c778d;
    --tk-fg-inverse: #10161f;

    --tk-line: #232c3b;
    --tk-line-strong: #303b4e;

    --tk-nav-bg: #161d29;
    --tk-nav-line: #242d3b;
    --tk-nav-hover: #1e2734;
    --tk-nav-active-bg: #10161f;
    --tk-nav-active-fg: #e9edf5;

    --tk-nav-panel-bg: #10161f;
    --tk-nav-panel-fg: #e9edf5;
    --tk-nav-panel-fg-muted: #9aa5bb;
    --tk-nav-panel-line: #232c3b;
    --tk-nav-panel-hover: #1a2231;

    /* Re-stepped rather than flipped: the dark surface has its own band. */
    --tk-chart-1: #3b82f6;
    --tk-chart-4: #db2777;

    --tk-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.5);
    --tk-shadow-overlay: 0 10px 32px -10px rgb(0 0 0 / 0.7);

    --tk-primary-hover: color-mix(in oklab, var(--tk-primary) 86%, #fff);
    --tk-primary-active: color-mix(in oklab, var(--tk-primary) 74%, #fff);
    --tk-primary-soft: color-mix(in oklab, var(--tk-primary) 18%, var(--tk-surface));
    --tk-accent-soft: color-mix(in oklab, var(--tk-accent) 18%, var(--tk-surface));

    --tk-success-soft: color-mix(in oklab, var(--tk-success) 18%, var(--tk-surface));
    --tk-warning-soft: color-mix(in oklab, var(--tk-warning) 20%, var(--tk-surface));
    --tk-danger-soft: color-mix(in oklab, var(--tk-danger) 18%, var(--tk-surface));
    --tk-info-soft: color-mix(in oklab, var(--tk-info) 18%, var(--tk-surface));

    /* Re-stepped, not flipped: on a dark panel the chip has to come up out of
       the surface and the text has to come up out of the colour. */
    --tk-nav-panel-active-bg: color-mix(in oklab, var(--tk-primary) 30%, var(--tk-nav-panel-bg));
    --tk-nav-panel-active-fg: color-mix(in oklab, var(--tk-primary) 45%, #fff);
}