@import url("/app/static/fonts/space-grotesk/space-grotesk.css");

/*
 * modernAIse Design Tokens
 * ========================
 * Single source of truth for the customer.modernise design system.
 * Generated for dash-0 (dashboard-rebuild-spec.md).
 *
 * RULES:
 *   - Never use raw hex values in component CSS — always reference a token.
 *   - This file defines :root defaults + a light-theme namespace.
 *   - A future dark theme would add :root[data-theme="dark"] here.
 *   - Space Grotesk is self-hosted under /app/static/fonts/space-grotesk/
 *     (font files + @font-face declarations land in dash-2).
 *
 * Accent: Terracotta #C8502A  (AI brand accent — the single non-greyscale chrome colour)
 *   #C8502A on #ffffff → 4.53:1  (AA normal text — just clears 4.5:1)
 *   #ffffff on #C8502A → 4.53:1  (AA — used for button labels)
 *   Does not reach AAA (7.0:1). Do not claim AAA in audits.
 */

/* ─────────────────────────────────────────
   1. LIGHT THEME  (only theme in v1)
   ───────────────────────────────────────── */

:root,
:root[data-theme="light"] {

  /* ── Colors: backgrounds ── */
  --color-bg:          #ffffff;   /* page background (monochrome white) */
  --color-bg-subtle:   #f1f5f9;   /* inset surfaces, zebra rows (neutral ramp) */
  --color-bg-card:     #ffffff;   /* card / panel / modal surface */

  /* ── Colors: foreground / text ── */
  --color-fg:          #000000;   /* primary text (monochrome black) */
  --color-fg-muted:    #64748b;   /* secondary / supporting text */
  --color-fg-dim:      #94a3b8;   /* placeholder, disabled labels */

  /* ── Colors: accent (Terracotta — AI brand) ── */
  --color-accent:      #C8502A;   /* AI brand accent — terracotta (the single non-greyscale chrome colour) */
  --color-accent-hover:#A8431F;   /* accent darkened ~8% for hover */
  --color-accent-soft: #FBEDE8;   /* low-saturation terracotta tint — bg for badges, highlights */
  --color-accent-fg:   #ffffff;   /* text/icon colour ON an accent-filled surface */

  /* ═══ COLOUR = MEANING ONLY  (guardrail — #1029) ═══════════════════════════
     The monochrome theme (#1027) is scoped to typographic CHROME only: text,
     text containers, backgrounds, borders, nav. Everything from here down —
     plus the hue-coded LITERALS in app/fragments/analyse.html (badge classes
     ~:48-54, radar rings ~:2076-2127, doughnuts ~:2476-2493 & ~:3215-3231,
     and the getStatus* score helpers) — encodes MEANING (status / score /
     RAID severity / radar / doughnut / workforce blend) and MUST stay
     coloured. Do NOT fold these into the hardcoded-colour scrub (#1028).
     --blend-augmented is pinned to its indigo literal for the same reason. */

  /* ── Colors: semantic ── */
  --color-danger:        #dc2626;            /* destructive actions, errors */
  --color-danger-hover:  #b91c1c;            /* danger darkened for hover */
  --color-danger-tint:   rgba(220, 38, 38, 0.06);  /* low-alpha danger bg (hover/wash) */
  --color-danger-border: rgba(220, 38, 38, 0.20);  /* low-alpha danger border */
  --color-success:       #16a34a;            /* success states */
  --color-warning:       #d97706;            /* warnings, caution states */
  --color-warning-tint:  rgba(217, 119, 6, 0.15);  /* low-alpha warning bg */
  --color-warning-border: rgba(217, 119, 6, 0.30); /* low-alpha warning border */

  /* ── Colors: borders ── */
  --color-border:        #e2e8f0; /* default border (slate-200) */
  --color-border-strong: #94a3b8; /* emphasis border, active inputs */

  /* ── Workforce blend palette ── */
  --blend-human:       #cbd5e1;   /* slate-300 — human-only segment */
  --blend-human-fg:    #334155;   /* slate-700 — text on the human segment */
  --blend-augmented:   #4f46e5; /* human + AI augmented segment — pinned indigo so the KEPT workforce-blend chart palette stays unchanged when --color-accent moved to terracotta */
  --blend-autonomous:  #1e1b4b;   /* indigo-950 — fully autonomous segment */

  /* ── Sentiment palette (aliases of semantic tokens) ── */
  --sentiment-supportive: var(--color-success);
  --sentiment-neutral:    var(--color-warning);
  --sentiment-resistant:  var(--color-danger);

  /* ─────────────────────────────
     2. RADIUS
     ───────────────────────────── */
  --radius-sm:   4px;   /* chips, tags, small elements */
  --radius-md:   8px;   /* inputs, dropdowns */
  --radius-lg:   12px;  /* cards, panels */
  --radius-pill: 9999px; /* pills, fully-rounded buttons */

  /* ─────────────────────────────
     3. SPACING  (4px base scale)
     ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ─────────────────────────────
     4. TYPOGRAPHY
     ───────────────────────────── */

  /* Font families */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
               Consolas, "Courier New", monospace;

  /* Font-size ramp */
  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-lg:   1.125rem;  /*  18px */
  --fs-xl:   1.25rem;   /*  20px */
  --fs-2xl:  1.5rem;    /*  24px */
  --fs-3xl:  1.875rem;  /*  30px */

  /* Line-height tokens */
  --lh-tight:  1.2;  /* headings */
  --lh-snug:   1.375;
  --lh-base:   1.5;  /* body text */
  --lh-relaxed:1.625;

  /* ─────────────────────────────
     5. SHADOWS
     ───────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08),
               0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10),
               0 2px 4px  rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12),
               0 4px  8px  rgba(15, 23, 42, 0.06);

  /* ─────────────────────────────
     6. FOCUS RINGS
     ───────────────────────────── */
  --focus-ring:        0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  --focus-ring-danger: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-danger);

  /* ─────────────────────────────
     7. MOTION
     ───────────────────────────── */
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --easing-default:   cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}


/* ═══════════════════════════════════════════
   1b. DARK THEME  (#1030)
   ═══════════════════════════════════════════
   Overrides ONLY the colour + shadow chrome tokens; radius / spacing /
   typography / motion are theme-agnostic and inherit from :root above.

   Applies when EITHER:
     - the page sets data-theme="dark" explicitly (manual override), OR
     - the page sets data-theme="auto" (the default — see every <html>) AND
       the OS prefers a dark colour scheme.
   data-theme="light" always wins (escape hatch), because it never matches
   either selector below.

   COLOUR = MEANING guardrail (#1029): the semantic + accent tokens keep their
   HUE and are only tonally lifted for legibility on the dark canvas (lighter
   shades of the same colour). The KEPT hue-coded LITERALS in analyse.html
   (badge classes, radar rings, doughnuts, getStatus* helpers, --blend-*) are
   intentionally NOT retuned here — that requires the #1029 rule-owner's call.

   The dark token body is duplicated across the explicit and auto selectors
   because CSS cannot share a declaration block between a plain selector and a
   media-query selector. Keep the two blocks identical. */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* backgrounds */
  --color-bg:          #0f172a;   /* slate-900 — dark canvas */
  --color-bg-subtle:   #1e293b;   /* slate-800 — inset surfaces, zebra rows */
  --color-bg-card:     #1b2740;   /* elevated card / panel / modal surface */

  /* foreground / text */
  --color-fg:          #f1f5f9;   /* slate-100 — primary text */
  --color-fg-muted:    #94a3b8;   /* slate-400 — secondary text */
  --color-fg-dim:      #64748b;   /* slate-500 — placeholder, disabled */

  /* accent (Terracotta — brand hue preserved; tint/hover lifted for dark) */
  --color-accent:      #C8502A;   /* brand accent unchanged (fills keep #fff @ AA) */
  --color-accent-hover:#D85C34;   /* lifted (not darkened) for hover on dark */
  --color-accent-soft: rgba(200, 80, 42, 0.18);  /* dark terracotta tint for badges */
  --color-accent-fg:   #ffffff;   /* text/icon on an accent-filled surface */

  /* semantic — same hues, lifted to ~400 shades for legibility on dark */
  --color-danger:        #f87171;
  --color-danger-hover:  #ef4444;
  --color-danger-tint:   rgba(248, 113, 113, 0.12);
  --color-danger-border: rgba(248, 113, 113, 0.28);
  --color-success:       #4ade80;
  --color-warning:       #fbbf24;
  --color-warning-tint:  rgba(251, 191, 36, 0.15);
  --color-warning-border: rgba(251, 191, 36, 0.32);

  /* borders */
  --color-border:        #334155; /* slate-700 */
  --color-border-strong: #475569; /* slate-600 */

  /* shadows — deeper, on black, so elevation reads on the dark canvas */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;

    /* backgrounds */
    --color-bg:          #0f172a;
    --color-bg-subtle:   #1e293b;
    --color-bg-card:     #1b2740;

    /* foreground / text */
    --color-fg:          #f1f5f9;
    --color-fg-muted:    #94a3b8;
    --color-fg-dim:      #64748b;

    /* accent */
    --color-accent:      #C8502A;
    --color-accent-hover:#D85C34;
    --color-accent-soft: rgba(200, 80, 42, 0.18);
    --color-accent-fg:   #ffffff;

    /* semantic */
    --color-danger:        #f87171;
    --color-danger-hover:  #ef4444;
    --color-danger-tint:   rgba(248, 113, 113, 0.12);
    --color-danger-border: rgba(248, 113, 113, 0.28);
    --color-success:       #4ade80;
    --color-warning:       #fbbf24;
    --color-warning-tint:  rgba(251, 191, 36, 0.15);
    --color-warning-border: rgba(251, 191, 36, 0.32);

    /* borders */
    --color-border:        #334155;
    --color-border-strong: #475569;

    /* shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  }
}


/* ═══════════════════════════════════════════
   BUTTON SYSTEM
   Baseline variants consumed by dash-2's
   rainbow-CTA sweep. Apply one of:
     .btn            (base — required on every button)
     .btn-primary    (filled accent — primary CTA)
     .btn-secondary  (outlined accent — secondary action)
     .btn-ghost      (text-only — tertiary / nav actions)
     .btn-danger     (filled danger — destructive actions)

   Size modifiers:
     .btn-sm   → 32px tall
     (default) → 40px tall
     .btn-lg   → 48px tall

   All buttons are pill-rounded by default.
   ════════════════════════════════════════════ */

.btn {
  /* Layout */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);

  /* Sizing — 40px default tap target */
  height:          40px;
  padding:         0 var(--space-4);

  /* Typography */
  font-family:     var(--font-sans);
  font-size:       var(--fs-sm);
  font-weight:     600;
  line-height:     1;
  white-space:     nowrap;
  text-decoration: none;

  /* Shape */
  border-radius:   var(--radius-pill);
  border:          1px solid transparent;

  /* Interaction */
  cursor:          pointer;
  user-select:     none;
  transition:      background var(--duration-fast) var(--easing-default),
                   border-color var(--duration-fast) var(--easing-default),
                   color var(--duration-fast) var(--easing-default),
                   box-shadow var(--duration-fast) var(--easing-default),
                   opacity var(--duration-fast) var(--easing-default);

  /* Focus — always visible for keyboard users */
  outline:         none;
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Size variants ── */
.btn-sm {
  height:    32px;
  padding:   0 var(--space-3);
  font-size: var(--fs-xs);
}

.btn-lg {
  height:    48px;
  padding:   0 var(--space-6);
  font-size: var(--fs-base);
}

/* ── Primary ── */
.btn-primary {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  color:        var(--color-accent-fg);
}

.btn-primary:hover:not(:disabled) {
  background:   var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-primary:active:not(:disabled) {
  background:   var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  opacity:      0.9;
}

.btn-primary:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Secondary ── */
.btn-secondary {
  background:   transparent;
  border-color: var(--color-accent);
  color:        var(--color-accent);
}

.btn-secondary:hover:not(:disabled) {
  background:   var(--color-accent-soft);
  border-color: var(--color-accent-hover);
  color:        var(--color-accent-hover);
}

.btn-secondary:active:not(:disabled) {
  background:   var(--color-accent-soft);
  opacity:      0.85;
}

.btn-secondary:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Ghost ── */
.btn-ghost {
  background:   transparent;
  border-color: transparent;
  color:        var(--color-fg-muted);
}

.btn-ghost:hover:not(:disabled) {
  background:   var(--color-bg-subtle);
  color:        var(--color-fg);
}

.btn-ghost:active:not(:disabled) {
  background:   var(--color-border);
  color:        var(--color-fg);
}

.btn-ghost:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Danger ── */
.btn-danger {
  background:   var(--color-danger);
  border-color: var(--color-danger);
  color:        var(--color-accent-fg);
}

.btn-danger:hover:not(:disabled) {
  background:   var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.btn-danger:active:not(:disabled) {
  background:   var(--color-danger-hover);
  opacity:      0.9;
}

.btn-danger:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

/* ── Disabled (all variants) ── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Native <select> option fix ────────────────────────────────────────────
   On Linux desktops with a dark OS theme (gnome adwaita-dark, kde breeze-dark)
   Chromium can render the popped-out <option> list in OS dark mode, producing
   illegible black-on-black until the user hovers a row. Pinning explicit
   light bg + dark fg on every <option> overrides the OS chrome and matches
   the app's light theme everywhere. Token-driven so it inverts correctly in
   dark mode (#1030) instead of pinning a permanent light popup. */
select option {
  background: var(--color-bg-card);
  color: var(--color-fg);
}