@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: Indigo #4f46e5
 *   #4f46e5 on #f8fafc → 6.07:1  (AA text — clears 4.5:1)
 *   #4f46e5 on #ffffff → 6.29:1  (AA text — clears 4.5:1)
 *   #ffffff on #4f46e5 → 6.29:1  (AA — used for button labels)
 *   None of these 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:          #f8fafc;   /* page background (slate-50) */
  --color-bg-subtle:   #f1f5f9;   /* inset surfaces, zebra rows */
  --color-bg-card:     #ffffff;   /* card / panel / modal surface */

  /* ── Colors: foreground / text ── */
  --color-fg:          #0f172a;   /* primary text (slate-900) */
  --color-fg-muted:    #64748b;   /* secondary / supporting text */
  --color-fg-dim:      #94a3b8;   /* placeholder, disabled labels */

  /* ── Colors: accent (Indigo) ── */
  --color-accent:      #4f46e5;   /* primary interactive colour */
  --color-accent-hover:#4338ca;   /* accent darkened ~8% for hover */
  --color-accent-soft: #eef2ff;   /* low-saturation tint (indigo-50) — bg for badges, highlights */
  --color-accent-fg:   #ffffff;   /* text/icon colour ON an accent-filled surface */

  /* ── 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:   var(--color-accent); /* human + AI augmented segment */
  --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-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 */
}


/* ═══════════════════════════════════════════
   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. */
select option {
  background: #ffffff;
  color: #0f172a;
}