/* ============================================================
   ChETL Theme Tokens
   ============================================================
   Defines CSS custom property values for .theme-chetl and
   .theme-classic. Must load AFTER typography.css.

   Design system: one cool-slate neutral hue, a deepened
   engineering-blue primary with a brighter interactive state,
   semantic colours kept apart from the accent, a tight radius
   scale, and borders-over-shadows (single elevation for things
   that float). Shared verbatim with the public website
   (chetl.org tokens.css) so both surfaces read as one product.
   ============================================================ */

/* ---- Theme-independent structural + semantic tokens ---- */
:root {
    /* Radius — tight, engineered */
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 6px;
    --radius-4: 8px;
    --radius-5: 10px;
    --radius-pill: 999px;

    /* Elevation — hairline borders carry structure; one soft
       shadow is reserved for things that genuinely float. */
    --elev-flat: none;
    --elev-pop: 0 1px 2px rgba(30,42,56,0.06), 0 4px 12px rgba(30,42,56,0.08);

    /* Semantic — distinct from the accent, shared across themes */
    --note: #b8801f;            /* engine note / caution (amber) */
    --note-surface: #fbf3e2;    /* amber note background */
    --warning: #b45309;
    --error: #b4362c;
}

.theme-chetl {
    /* Neutrals — cool slate, single hue */
    --surface-base: #f4f6fa;
    --surface-elevated: #ffffff;
    --surface-subtle: #eceff4;
    --text-primary: #1e2a38;
    --text-secondary: #3a4658;
    --text-muted: #64707f;
    --border-muted: #dbe1ea;
    --border-strong: #b7c0ce;
    --divider-color: #dbe1ea;

    /* Brand */
    --accent-primary: #2b5bd0;   /* buttons, active, links — deepened for gravity + contrast */
    --accent-bright: #356fe0;    /* hover / focus / interactive emphasis */
    --accent-soft: #e7edfb;      /* active nav, soft fills */
    --focus-ring: #356fe0;

    /* Validation — green ONLY for verified / assessment, never for a result */
    --accent-success: #1f8f5f;

    --q-primary: #2b5bd0;
}

.theme-classic {
    /* Neutral monochrome variant — same structure, no hue */
    --surface-base: #f3f4f6;
    --surface-elevated: #ffffff;
    --surface-subtle: #e6e7ea;
    --text-primary: #17181b;
    --text-secondary: #3f4348;
    --text-muted: #6b7079;
    --border-muted: #d7d9de;
    --border-strong: #a9adb5;
    --divider-color: #d7d9de;

    --accent-primary: #3a3f46;
    --accent-bright: #52585f;
    --accent-soft: #e2e4e8;
    --focus-ring: #52585f;

    --accent-success: #1f8f5f;

    --q-primary: #3a3f46;
}