/* Broa console — design tokens. THE single source for every colour, space,
   size and radius in the console. See ../UI.md for the rules that govern it.
 *
 * Two hard rules, both learned here rather than imported from a style guide:
 *
 *   1. If a variable is a colour, it is defined TWICE — once light, once dark.
 *      A partial dark block is how "active" and "Remove…" ended up legible in one
 *      theme only: --ok, --bad and --warn kept light-theme values chosen against
 *      white and were rendered on near-black.
 *
 *   2. No component may contain a raw hex, px or font-size. If a value is needed
 *      that is not here, adding it is a decision — make it here, once.
 *
 * Structure follows the Zitadel console (auth-svc, ADR-0016), read from its own
 * stylesheet on 2026-08-05 rather than guessed at: a numbered background ramp with
 * contrast pairs, one accent, three semantic colours, 4px radius. Its values are
 * recorded in UI.md for reference. Its PALETTE is deliberately not copied — this is
 * Broa, not Zitadel — and neither is its webfont: a system stack costs no
 * network request, which keeps NFR-POR-011's air-gapped build honest.
 */

:root {
  /* ---- surface and text ------------------------------------------------ */
  --bg:          #ffffff;   /* page */
  --surface:     #fafafa;   /* raised: cards, table headers, the nav rail */
  --surface-2:   #f3f4f6;   /* hover, striping, inset wells */
  --line:        #e5e7eb;   /* every border. Structure is borders, not shadows */
  --fg:          #1a1d21;
  --muted:       #6b7280;   /* secondary text; must still clear AA on --bg */

  /* ---- accent: ONE. Primary action, active nav item, focus ring --------- */
  --accent:      #1d4ed8;
  --accent-fg:   #ffffff;   /* text ON accent */
  --accent-weak: #eff6ff;   /* accent-tinted fill: selected row, active item */
  --link:        #1d4ed8;   /* without a rule links fall back to the UA's #0000EE */

  /* ---- semantic: these carry MEANING and stay recognisable in both themes */
  --ok:          #065f46;
  --warn:        #b45309;
  --warnbg:      #fffbeb;
  --bad:         #991b1b;

  /* ---- focus: never removed, never invisible (NFR-USA-003) -------------- */
  --focus:       var(--accent);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- spacing. 4px base. THESE ARE THE ONLY VALUES -------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-8: 48px;  --s-10: 64px;

  /* ---- type. Four sizes, two weights, nothing else ---------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --text-xs:   12px;  /* table meta, timestamps, badges */
  --text-sm:   13px;  /* dense table cells, secondary labels */
  --text-base: 14px;  /* body. An operations console reads denser than a website */
  --text-lg:   16px;  /* section headings */
  --weight-normal: 400;
  --weight-bold:   600;
  --leading:   1.5;

  /* ---- radius. Zitadel uses 4px throughout; matched deliberately -------- */
  --radius:    4px;
  --radius-lg: 8px;   /* dialogs and popovers only */

  /* ---- elevation. Shadows are for things that FLOAT, never for cards ---- */
  --shadow-overlay: 0 4px 16px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);

  /* ---- AI-generated content must be visually distinct (NFR-USA-005) ----- */
  --ai-line: #7c3aed;
  --ai-bg:   #faf5ff;

  --backdrop: rgba(0, 0, 0, .45);   /* behind a modal dialog */

  /* ---- filled controls (UI.md §4) --------------------------------------
     A control is a FILLED block with dark text. Deliberately the same values in
     both themes: these are mid-tones that carry dark text on either background,
     and a button that changes colour with the theme is a button whose contrast
     has to be re-proved twice.

     Dark text is what forces the light fill. Black on the light-theme --accent
     (#1d4ed8) is 2.76:1 and fails AA outright; on these it is 7.28:1 (blue) and
     6.69:1 (red). --accent stays the darker blue because it is also the focus
     ring and the active nav pill, where it sits behind WHITE text. */
  --btn-bg:        #60a5fa;
  --btn-fg:        #101418;
  --btn-danger-bg: #f87171;
  --btn-danger-fg: #101418;
  /* A DARK edge, a shade down from each fill. The border was transparent, so on
     a white page the button had no edge at all and its light fill ran straight
     into the background; in dark the pale fill read as a white-rimmed blob. A
     darker shade of the fill itself delineates the control without adding a
     second colour, and — like the fills — it is one value for both themes. */
  --btn-border:        #2563eb;
  --btn-danger-border: #dc2626;

  /* ---- health map. Four states, one variable each, so a colour can never
     mean two things in one view. Kept distinct from --ok/--warn/--bad: those
     are the platform's semantics, these are one view's, and merging them
     would make a health colour change every status pill in the console. */
  --h-ok:    #15803d;  --h-okbg:    #f0fdf4;
  --h-warn:  #b45309;  --h-warnbg:  #fffbeb;
  /* Foreground for text painted ON --h-warn (the elevation band), not on the
     page. It must flip with the theme because --h-warn does: it is a DARK
     burnt orange here and a BRIGHT amber in dark mode, so a single hardcoded
     white is legible in exactly one of the two. */
  --h-warn-fg: #ffffff;
  --h-bad:   #b91c1c;  --h-badbg:   #fef2f2;
  --h-off:   #9ca3af;  --h-offbg:   transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14171a;
    --surface:     #1b1f24;
    --surface-2:   #22272e;
    --line:        #2b3038;
    --fg:          #e6e8ea;
    --muted:       #9aa1a9;

    --accent:      #60a5fa;
    --accent-fg:   #0b1220;   /* dark text on a light accent — not white */
    --accent-weak: #16233a;
    --link:        #93c5fd;

    /* Lightened, not inverted: the three signals must stay the same three. */
    --ok:          #4ade80;
    --warn:        #fbbf24;
    --warnbg:      #2a2113;
    --bad:         #f87171;

    --shadow-overlay: 0 4px 16px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);

    --ai-line: #a78bfa;
    --ai-bg:   #1c1630;

    --backdrop: rgba(0, 0, 0, .6);

    --h-ok:    #4ade80;  --h-okbg:    #0e1f16;
    --h-warn:  #fbbf24;  --h-warnbg:  #231a09;
    --h-warn-fg: #1b1200;   /* dark text on a light band — white here is 1.67:1 */
    --h-bad:   #f87171;  --h-badbg:   #2a1213;
    --h-off:   #6b7280;  --h-offbg:   transparent;
  }
}