/*
 * Control Room — the design system.
 *
 * ONE file defines both themes. There is no companion overrides file: the old
 * light/light-mode.css existed because ~75% of the CSS wrote colour literals
 * instead of tokens, so light mode had to be re-stated rule by rule. It lost
 * that race constantly — status pills, for one, rendered every state the same
 * grey in light mode, so a ticket board carried no state information at all.
 *
 * Two layers, and the split matters:
 *
 *   1. ROLES  — what a colour is FOR (--ground, --ink, --accent, --pass).
 *               Defined twice: light on :root, dark under [data-theme="dark"].
 *               These are the only values that change between themes.
 *
 *   2. ALIASES — the historical names (--primary-color, --card-bg, ...) mapped
 *               onto roles. Defined ONCE, because var() resolves against the
 *               element's own custom properties and both role blocks land on
 *               <html>. Every existing call site therefore follows the theme
 *               with no edit.
 *
 * Adding a colour: give it a role. If you find yourself writing a hex literal
 * in a component stylesheet, that is the bug this file exists to prevent.
 */

/* =================================================================
   Roles — Light (default)
   ================================================================= */
:root {
    /* Native controls -- checkboxes, selects, scrollbars, date pickers --
       follow the OS, not the page, unless the page says otherwise. Without
       this, a light page on a machine in Dark Mode renders dark grey
       checkboxes and dark dropdowns in the middle of white cards. The theme
       below is explicit about which mode it is; say so here too. */
    color-scheme: light;

    /* Surfaces, lightest working area on top. On paper the work surface is
       the brightest thing on screen; the rail sits *under* it. In dark this
       relationship inverts — same rule, opposite direction. */
    --ground:        #f5f7f9;
    --surface:       #ffffff;
    --raised:        #ffffff;
    --sunken:        #eef1f5;
    --rail-bg:       #f0f3f6;
    --panel-bg:      #f9fafb;
    --overlay:       rgba(15, 23, 32, 0.32);

    /* Hairlines */
    --line:          #dee4ea;
    --line-firm:     #cbd3dc;

    /* Text */
    --ink:           #0f1720;
    --soft:          #4d5b6b;
    --mute:          #5f6b78;
    --on-accent:     #ffffff;

    /* Accent — interactive, and the agent's own voice */
    --accent:        #2563d9;
    --accent-hover:  #1d4fb0;
    --accent-soft:   #e7eefc;
    /* The FILL behind white text, split from --accent because the two jobs pull
       in opposite directions: a fill must be dark enough for white text, a
       foreground must be light enough to read on a dark surface. In light they
       happen to agree; in dark they do not. */
    --accent-fill:   #2563d9;
    --accent-fill-hover: #1d4fb0;
    --accent-text:   #2563d9;
    --accent-rgb:    37, 99, 217;   /* for rgba() call sites */

    /* Surface tints. The stylesheets are full of rgba(255,255,255,0.05) —
       "lighten whatever is behind me", which only works on a dark ground. On
       paper it is white-on-white and the element disappears. These carry the
       same intent in both themes: a slight step away from the surface. */
    --tint-1:        rgba(15, 23, 32, 0.025);
    --tint-2:        rgba(15, 23, 32, 0.05);
    --tint-3:        rgba(15, 23, 32, 0.08);

    /* Semantic state. Separate from the accent on purpose: these encode what
       happened to a ticket, and must never read as "clickable". */
    --pass:          #0d7a52;
    --pass-soft:     #e2f2ec;
    --run:           #9a6206;
    --run-soft:      #fbf0dd;
    --fail:          #c53540;
    --fail-soft:     #fdeaeb;
    /* For destructive FILLS. --fail is tuned to be legible as text on the
       page ground, which in dark makes it a bright red — white on it only
       reaches 2.88:1. A filled button needs a deeper red underneath. */
    --fail-strong:   #b3202b;
    --info:          #2563d9;
    --info-soft:     #e7eefc;

    /* Elevation — cool-tinted, never neutral black */
    --shadow-sm:     0 1px 2px rgba(23, 38, 56, 0.06);
    --shadow-md:     0 4px 10px -2px rgba(23, 38, 56, 0.10);
    --shadow-lg:     0 12px 26px -8px rgba(23, 38, 56, 0.16);
    --shadow-xl:     0 22px 44px -14px rgba(23, 38, 56, 0.22);

    /* Type */
    --font-ui:       "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale. Anchored to the rail: nav rows are 12.5px, so body sits one
       step above at 13px and nothing in the content area competes with the
       page title. Before this the same thing — a project name — rendered at
       17.6px in the list, 15px on the board, 17.6px in the chat header and
       22px on the dashboard. */
    --text-2xl:      22px;   /* page title */
    --text-xl:       18px;   /* modal title */
    --text-lg:       15px;   /* item title, section heading */
    --text-md:       13px;   /* body, primary UI */
    --text-sm:       12px;   /* secondary, table cell */
    --text-xs:       11px;   /* metadata, usually mono */
    --text-2xs:     9.5px;   /* micro label, always mono */

    /* Page gutter. One value, owned by the page container. The layout used to
       stack four of these — the content wrapper, a .container with its own
       margin AND padding AND a 1200px cap, the page container, and the header's
       own margin — which came to 96px of left inset and 64px above the first
       line of content. */
    --page-x:         24px;
    --page-y:         18px;

    /* Geometry */
    --rail-w:        216px;   /* the nav rail; every content offset reads this */
    --rail-w-min:     60px;   /* collapsed */
    --radius-sm:     5px;
    --radius-md:     8px;
    --radius-lg:     11px;

    /* Motion */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.4s ease;
}

/* =================================================================
   Roles — Dark
   ================================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    --ground:        #0b0f14;
    --surface:       #141c25;
    --raised:        #18222d;
    --sunken:        #101820;
    --rail-bg:       #0e141b;
    --panel-bg:      #0e141b;
    --overlay:       rgba(0, 0, 0, 0.58);

    --line:          #1f2b37;
    --line-firm:     #2a3846;

    --ink:           #e6edf5;
    --soft:          #93a3b5;
    --mute:          #7c8da3;
    --on-accent:     #ffffff;

    --accent:        #3d7bfd;
    --accent-hover:  #5b90ff;
    --accent-soft:   #111a2b;
    --accent-rgb:    61, 123, 253;
    --accent-fill:   #2f66d8;
    --accent-fill-hover: #3569d4;
    --accent-text:   #4785ff;

    --tint-1:        rgba(255, 255, 255, 0.03);
    --tint-2:        rgba(255, 255, 255, 0.06);
    --tint-3:        rgba(255, 255, 255, 0.10);

    --pass:          #35c98a;
    --pass-soft:     #10281f;
    --run:           #e0a33e;
    --run-soft:      #2a2113;
    --fail:          #f0555f;
    --fail-soft:     #2d1518;
    --fail-strong:   #c0272f;
    --info:          #3d7bfd;
    --info-soft:     #111a2b;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:     0 4px 10px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg:     0 12px 26px -8px rgba(0, 0, 0, 0.6);
    --shadow-xl:     0 22px 44px -14px rgba(0, 0, 0, 0.7);
}

/* =================================================================
   Aliases — the historical names, mapped onto roles.

   Defined once. Do not duplicate these into the dark block: they read roles
   through var(), and both role blocks apply to <html>, so they already follow
   the theme. Duplicating them is how the old file drifted out of sync.
   ================================================================= */
:root {
    /* Primary / brand */
    --primary-color:        var(--accent);
    --primary-light:        var(--accent-hover);
    --primary-dark:         var(--accent-hover);
    --primary-gradient:     linear-gradient(135deg, var(--accent), var(--accent-hover));
    --primary-color-rgb:    var(--accent-rgb);
    --primary-hover:        var(--accent-hover);

    /* Secondary / accent — collapsed onto the semantic set. The old palette
       ran three unrelated hues (purple, orange, green) with no rule about
       which meant what. */
    --secondary-color:      var(--pass);
    --secondary-light:      var(--pass);
    --secondary-dark:       var(--pass);
    --accent-color:         var(--run);
    --accent-light:         var(--run);
    --accent-dark:          var(--run);

    /* Backgrounds */
    --background-color:     var(--ground);
    --background-alt:       var(--rail-bg);
    --background-elevated:  var(--raised);
    --background-surface:   var(--surface);
    --background-overlay:   var(--overlay);

    /* Cards & panels */
    --card-bg:              var(--surface);
    --card-bg-hover:        var(--sunken);
    --card-bg-alt:          var(--raised);
    /* --panel-bg is a role, defined above. Aliasing it to itself is a cycle
       that silently invalidates the token — leave it alone. */

    /* Text */
    --text-primary:         var(--ink);
    --text-secondary:       var(--soft);
    --text-muted:           var(--mute);
    --text-inverse:         var(--on-accent);
    --text-link:            var(--accent);
    --text-link-hover:      var(--accent-hover);

    /* Borders */
    --border-color:         var(--line);
    --border-light:         var(--line);
    --border-focus:         var(--accent);

    /* Status */
    --success-color:        var(--pass);
    --success-bg:           var(--pass-soft);
    --error-color:          var(--fail);
    --error-bg:             var(--fail-soft);
    --warning-color:        var(--run);
    --warning-bg:           var(--run-soft);
    --info-color:           var(--info);
    --info-bg:              var(--info-soft);

    /* Inputs */
    --input-bg:             var(--surface);
    --input-bg-focus:       var(--surface);
    --input-border:         var(--line-firm);
    --input-border-focus:   var(--accent);
    --input-placeholder:    var(--mute);

    /* Buttons */
    --btn-primary-bg:       var(--accent);
    --btn-primary-text:     var(--on-accent);
    --btn-primary-hover:    var(--accent-hover);
    --btn-secondary-bg:     transparent;
    --btn-secondary-border: var(--line-firm);
    --btn-secondary-text:   var(--soft);
    --btn-secondary-hover-bg: var(--sunken);

    /* Scrollbars */
    --scrollbar-track:      transparent;
    --scrollbar-thumb:      var(--line-firm);
    --scrollbar-thumb-hover: var(--mute);

    /* Code */
    --code-bg:              var(--sunken);
    --code-text:            var(--ink);
    --code-border:          var(--line);
}