/* ink-ember.css: the dashboard's ONE token layer (#203).
 *
 * WHAT. The "Ink and ember" palette the operator approved for the analytics
 * page (#187): a warm off-white ground, near-black ink for structure and one
 * ember orange for the thing that matters. Defined once for light and once
 * for dark, as --an-* tokens. Every /dash page reads it, analytics included
 * (analytics.css used to carry its own copy; it now reads these).
 *
 * HOW. The rest of the dashboard was written against the site's --sc-* tokens
 * (widget.css, blue). Rather than restyle hundreds of rules one by one, the
 * --sc-* names are pointed at the ink and ember tokens below, so dash.css and
 * the widget.css rules the dashboard borrows (cards, inputs, buttons, masthead)
 * follow automatically. The few rules that hard-code a colour are fixed in
 * dash.css itself.
 *
 * WHY SCOPED TO :root.dash-root. Supporter-facing pages also load widget.css
 * and use the same --sc-* names, but their colours are each client's theme and
 * must never change here. Two locks keep this file off them:
 *   1. only dash/templates/base.html.j2 links this stylesheet, and
 *   2. every rule needs the `dash-root` class, which only that template puts
 *      on <html>.
 * The tokens sit on <html> (not <body>) because widget.css paints the <html>
 * background too; scoping to <body> left a strip of the old blue below short
 * pages.
 *
 * SPECIFICITY. `:root.dash-root` (0,2,0) ties widget.css's
 * `:root[data-theme="dark"]` and wins by load order (this file loads after
 * widget.css), so the --sc-* remap holds in BOTH themes. The dark block adds
 * the attribute, (0,3,0), so it beats the light block.
 *
 * THEME. Light by default; base.html.j2's inline script stamps
 * data-theme="dark" on <html> from localStorage before first paint. There is
 * no prefers-color-scheme query anywhere in the dashboard, and this file adds
 * none, so the page can never disagree with the theme toggle.
 *
 * TYPE. Untouched: JetBrains Mono in every slot (operator rule).
 */

/* ---- Ink and ember: light ---------------------------------------------- */
:root.dash-root {
    --an-bg:              #f6f5f2;
    --an-surface:         #ffffff;
    --an-surface-2:       #ecebe6;
    --an-surface-3:       #dedcd5;
    --an-ink:             #1d1f24;
    --an-ink-2:           #50535b;
    --an-ink-3:           #7c7e85;
    --an-hair:            #e2e0d9;
    --an-grid:            #ebe9e3;
    --an-accent:          #2b2f3a;   /* structure: the ink */
    --an-accent-ink:      #ffffff;
    --an-series-finished: #b9bcc6;   /* the steps on the way */
    --an-series-sent:     #c2571a;   /* the goal: ember */
    --an-good:            #1d7f55;
    --an-good-soft:       #dcefe5;
    --an-warn:            #9a6512;
    --an-warn-soft:       #f6ead3;
    --an-error:           #b3253f;
    --an-focus:           #c2571a;
    --an-link:            #1f5fbf;   /* links must look like links (2026-10-21) */
    --an-shadow:          0 1px 2px rgba(29, 31, 36, 0.06), 0 8px 28px rgba(29, 31, 36, 0.08);

    /* Dashboard-only additions, in the same palette. The masthead is the one
       solid ink band (light) / quiet surface band (dark); the lighter shadow
       is for small things like the user menu. */
    --dash-masthead-bg:   #1d1f24;
    --dash-masthead-ink:  #f6f5f2;
    --dash-shadow-soft:   0 1px 2px rgba(29, 31, 36, 0.06), 0 4px 12px rgba(29, 31, 36, 0.06);

    /* ---- The site's names, pointed at the palette ----------------------
       Declared ONCE here; because they are var() references, they re-resolve
       against the dark --an-* values below without being repeated. */
    --sc-primary:   var(--an-ink);          /* headings, ink links, ghost buttons */
    --sc-accent:    var(--an-series-sent);  /* active nav, badge, focus, kicker */
    --sc-stamp:     var(--an-accent);       /* was "deep blue ink"; now the ink */
    --sc-pulse:     var(--an-series-sent);  /* the masthead diamond */
    --sc-paper:     var(--an-bg);
    --sc-surface:   var(--an-surface);
    --sc-panel:     var(--an-surface);
    --sc-ink:       var(--an-ink);
    --sc-moss:      var(--an-ink-2);
    --sc-rule:      var(--an-hair);
    --sc-ink-faint: var(--an-ink-3);        /* experiments pages read this name */
    --sc-highlight: color-mix(in srgb, var(--an-series-sent) 16%, transparent);
    --sc-shadow-paper:     var(--dash-shadow-soft);
    --sc-shadow-card:      var(--an-shadow);
    --sc-shadow-btn:       none;            /* flat ink buttons, as on analytics */
    --sc-shadow-btn-hover: var(--dash-shadow-soft);
    /* The analytics page has a clean ground, no paper grain; match it. */
    --sc-noise: none;
}

/* ---- Ink and ember: dark ----------------------------------------------- */
:root.dash-root[data-theme="dark"] {
    --an-bg:              #121316;
    --an-surface:         #18191d;
    --an-surface-2:       #1f2125;
    --an-surface-3:       #2a2c31;
    --an-ink:             #ece9e2;
    --an-ink-2:           #b5b2aa;
    --an-ink-3:           #87858e;
    --an-hair:            #2c2e33;
    --an-grid:            #24262b;
    --an-accent:          #e6e3da;
    --an-accent-ink:      #121316;
    --an-series-finished: #5a5e69;
    --an-series-sent:     #f08a4b;
    --an-good:            #5cc79a;
    --an-good-soft:       #163428;
    --an-link:            #8ab4f8;
    --an-warn:            #e2b062;
    --an-warn-soft:       #3a2c14;
    --an-error:           #e8798b;
    --an-focus:           #f08a4b;
    --an-shadow:          0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);

    /* In dark the masthead is a surface band, not a light slab: a bright bar
       across the top of a dark page pulls the eye away from the content. */
    --dash-masthead-bg:   #18191d;
    --dash-masthead-ink:  #ece9e2;
    --dash-shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
}