/* =====================================================================
   mmi-one-tokens.css
   ---------------------------------------------------------------------
   Token foundation for the new MMI One shell (cross-app top bar, gnav,
   user menu, history slideover). Mirrors @getbonzo/ui's shadcn-derived
   token shape so a Bonzo CSS rule consuming `hsl(var(--background))`
   drops in unchanged.

   This file is PURELY ADDITIVE. It does not touch the existing
   `--bg-primary` / `--text-primary` / `--accent-primary` tokens that
   ChatMMI's existing CSS depends on — those continue to live in
   styles.css and the per-theme files.

   How to consume in new shell CSS:
     .my-thing { background: hsl(var(--background)); color: hsl(var(--foreground)); }

   Why HSL channels (vs raw oklch like upstream bonzo): readability for
   designers tweaking values, plus the values came from this branch's
   design exploration which was authored in HSL. We can re-express in
   oklch later if pixel-perfect bonzo parity matters.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DEFAULT THEME (unclassed body)
   ChatMMI's base dark surface — flat and dense. Cards sit only ~2%
   lighter than the page background; visual separation comes from
   borders, not from a strong elevation lift. Mirrors the dark palette
   in colors_and_type.css from the design exploration.
   --------------------------------------------------------------------- */
:root {
  /* Surfaces — softer clustering: bg 10%, card 13%, secondary/accent 20% */
  --background:        222 47% 10%;
  --foreground:        210 40% 98%;
  --card:              222 35% 13%;
  --card-foreground:   210 40% 98%;
  --popover:           222 35% 13%;
  --popover-foreground:210 40% 98%;

  /* Brand accent — lift slightly so it pops on the deeper bg. White
     foreground reads best on the light primary; the technically higher
     WCAG ratio of dark-on-bright is moot when the visual feel is the
     deciding factor for chat surfaces. */
  --primary:           226 80% 60%;
  --primary-foreground:0 0% 100%;

  /* Quiet surfaces (hovers, secondary fills) */
  --secondary:         217 33% 20%;
  --secondary-foreground: 210 40% 98%;
  --muted:             217 33% 22%;
  --muted-foreground:  215 20% 65%;
  --accent:            217 33% 20%;
  --accent-foreground: 210 40% 98%;

  /* Status */
  --destructive:       0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success:           142 71% 45%;
  --success-foreground:0 0% 100%;
  --warning:           38 92% 50%;
  --warning-foreground:222 47% 11%;
  --info:              199 89% 48%;
  --info-foreground:   0 0% 100%;

  /* Pop — hot pink, reserved for high-attention moments (active app
     marker, single empty-state illustration, etc). Never as nav accent
     or default fill. At most one pop element per screen. */
  --pop:               330 85% 58%;
  --pop-foreground:    0 0% 100%;

  /* Edges — visible against both bg and card surfaces */
  --border:            217 33% 26%;
  --input:             217 33% 26%;
  --ring:              226 80% 65%;

  /* Inline link text. Calibrated to read as a "popping" link, not a dim
     navy. Sits between --primary's button-tuned 60% L and a washed-out
     75% L — saturation stays high so it reads as the brand blue, just a
     touch lifted for inline-text contrast on the dark page bg. Light
     themes set --link to match primary since primary is already dark
     enough for inline text on a white page. */
  --link:              226 90% 67%;

  /* Sidebar / gnav rail — slightly elevated above the page bg so the
     rail reads as a contained surface */
  --sidebar:                  222 35% 13%;
  --sidebar-foreground:       210 40% 98%;
  --sidebar-accent:           217 33% 20%;
  --sidebar-accent-foreground:210 40% 98%;
  --sidebar-border:           217 33% 26%;
  --sidebar-ring:             226 80% 65%;

  /* Radii — shadcn defaults */
  --mmi-radius-sm: 0.25rem;
  --mmi-radius:    0.5rem;
  --mmi-radius-lg: 0.75rem;
  --mmi-radius-full: 9999px;

  /* Shell sizing */
  --mmi-shell-header-height: 56px;
  --mmi-gnav-width:          56px;

  /* z-index scale (bonzo bar must beat the existing app's chrome) */
  --mmi-z-shell:       60;
  --mmi-z-dropdown:    70;
  --mmi-z-slideover:   80;
  --mmi-z-scrim:       79;
}

/* ---------------------------------------------------------------------
   BONZO DARK — exact mirror of the default (`:root`) palette with
   ONLY the brand hue swapped to pink on --primary / --ring. Surfaces,
   foreground, secondary, muted, accent, border, sidebar are all
   identical to default so anything tuned against neutrals (cards,
   hovers, dividers) reads consistently between the two dark themes.
   --------------------------------------------------------------------- */
body.bonzo-theme {
  --background:        222 47% 10%;
  --foreground:        210 40% 98%;
  --card:              222 35% 13%;
  --card-foreground:   210 40% 98%;
  --popover:           222 35% 13%;
  --popover-foreground:210 40% 98%;

  --primary:           330 78% 56%;
  --primary-foreground:0 0% 100%;

  --secondary:         217 33% 20%;
  --secondary-foreground: 210 40% 98%;
  --muted:             217 33% 22%;
  --muted-foreground:  215 20% 65%;
  --accent:            217 33% 20%;
  --accent-foreground: 210 40% 98%;

  --destructive:       0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success:           142 71% 45%;
  --warning:           38 92% 50%;

  --border:            217 33% 26%;
  --input:             217 33% 26%;
  --ring:              330 78% 56%;
  --link:              330 90% 67%;

  --sidebar:                  222 35% 13%;
  --sidebar-foreground:       210 40% 98%;
  --sidebar-accent:           217 33% 20%;
  --sidebar-accent-foreground:210 40% 98%;
  --sidebar-border:           217 33% 26%;
  --sidebar-ring:             330 78% 56%;
}

/* ---------------------------------------------------------------------
   BONZO LIGHT — exact mirror of datacenter (light) with ONLY the
   brand hue swapped to pink on --primary / --ring. The datacenter
   block is the canonical light-theme geometry; bonzo-light = same
   neutrals + pink primary. Switching between the two light themes
   is a hue swap, not a layout swap.
   --------------------------------------------------------------------- */
body.bonzo-light-theme {
  --background:        0 0% 100%;
  --foreground:        220 14% 22%;
  --card:              0 0% 100%;
  --card-foreground:   220 14% 22%;
  --popover:           0 0% 100%;
  --popover-foreground:220 14% 22%;

  --primary:           330 78% 56%;
  --primary-foreground:220 14% 97%;

  --secondary:         220 9% 91%;
  --secondary-foreground: 220 14% 22%;
  --muted:             220 9% 96%;
  --muted-foreground:  220 9% 50%;
  --accent:            220 9% 96%;
  --accent-foreground: 220 14% 22%;

  --destructive:       0 65% 51%;
  --destructive-foreground: 0 0% 100%;

  --border:            220 11% 87%;
  --input:             220 11% 87%;
  --ring:              330 78% 56%;
  --link:              330 78% 50%;

  --sidebar:                  0 0% 100%;
  --sidebar-foreground:       220 14% 22%;
  --sidebar-accent:           220 9% 96%;
  --sidebar-accent-foreground:220 14% 22%;
  --sidebar-border:           220 11% 87%;
  --sidebar-ring:             330 78% 56%;
}

/* ---------------------------------------------------------------------
   DATACENTER — pure white page with neutral gray surfaces, blue
   only on --primary / --ring. Mirrors the bonzo-light geometry
   (which mirrors upstream bonzo-ui) with the brand hue swapped from
   pink (330) to blue (220). Keeps the two light themes structurally
   identical so anything tuned against neutrals reads consistently
   between them.
   --------------------------------------------------------------------- */
body.datacenter-theme {
  --background:        0 0% 100%;
  --foreground:        220 14% 22%;
  --card:              0 0% 100%;
  --card-foreground:   220 14% 22%;
  --popover:           0 0% 100%;
  --popover-foreground:220 14% 22%;

  --primary:           220 79% 44%;
  --primary-foreground:220 14% 97%;

  --secondary:         220 9% 91%;
  --secondary-foreground: 220 14% 22%;
  --muted:             220 9% 96%;
  --muted-foreground:  220 9% 50%;
  --accent:            220 9% 96%;
  --accent-foreground: 220 14% 22%;

  --destructive:       0 65% 51%;
  --destructive-foreground: 0 0% 100%;

  --border:            220 11% 87%;
  --input:             220 11% 87%;
  --ring:              220 79% 44%;
  --link:              220 79% 44%;

  --sidebar:                  0 0% 100%;
  --sidebar-foreground:       220 14% 22%;
  --sidebar-accent:           220 9% 96%;
  --sidebar-accent-foreground:220 14% 22%;
  --sidebar-border:           220 11% 87%;
  --sidebar-ring:             220 79% 44%;
}

/* ---------------------------------------------------------------------
   HIDDEN THINGS — dark red
   --------------------------------------------------------------------- */
body.hiddenthings-theme {
  --background:        0 50% 5%;
  --foreground:        0 0% 100%;
  --card:              0 47% 8%;
  --card-foreground:   0 0% 100%;
  --popover:           0 49% 12%;
  --popover-foreground:0 0% 100%;

  --primary:           0 84% 60%;
  --primary-foreground:0 0% 100%;

  --secondary:         0 49% 12%;
  --secondary-foreground: 0 0% 100%;
  --muted:             0 49% 16%;
  --muted-foreground:  215 20% 65%;
  --accent:            0 73% 41%;
  --accent-foreground: 0 0% 100%;

  --destructive:       0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border:            0 53% 19%;
  --input:             0 53% 19%;
  --ring:              0 84% 60%;
  --link:              0 90% 67%;

  --sidebar:                  0 47% 8%;
  --sidebar-foreground:       0 0% 100%;
  --sidebar-accent:           0 49% 12%;
  --sidebar-accent-foreground:0 0% 100%;
  --sidebar-border:           0 53% 19%;
  --sidebar-ring:             0 84% 60%;
}

/* NOTE: elevate-theme and uwm-theme are experimental white-label themes
   and intentionally not given mmi-one tokens here. If/when they go
   production, copy one of the blocks above as a template. */

/* =====================================================================
   LEGACY TOKEN COMPAT SHIM
   ---------------------------------------------------------------------
   Maps the old token names (--bg-primary, --accent-primary,
   --gradient-blue, etc.) consumed by styles.css / dashboard.css /
   per-theme overrides onto the new HSL channel tokens defined above.
   Lives in this file (loaded first in every HTML head) so the mapping
   applies during the *first* paint — without it, legacy CSS would
   paint with the old slate palette before mmi-one-shell.css arrives
   and patches the tokens, producing a visible flash.

   Old → new mapping rationale:
     bg-primary (page)     → --background
     bg-secondary (card)   → --card        (~2% lift, was ~6%)
     bg-tertiary (hover)   → --secondary
     bg-quaternary (deep)  → --accent
     border-*              → --border
     accent-primary        → --primary
     success/error/warning → --success/--destructive/--warning

   Text hierarchy (--text-primary/-secondary/-tertiary/-muted) is
   intentionally NOT remapped — per-theme files set values tuned for
   each theme's bg, and a hardcoded near-white here would break the
   light themes.

   Specificity 0,0,1 + !important on body so we win against
   `body.bonzo-theme { ... }` (0,1,0) declarations in per-theme files
   that redefine the same legacy tokens.

   `--gradient-blue` / `-hover` lived here too but every consumer
   has been migrated to `hsl(var(--primary))` directly, so the shim
   line went with them.
   ===================================================================== */
body {
  --bg-primary:    hsl(var(--background)) !important;
  --bg-secondary:  hsl(var(--card)) !important;
  --bg-tertiary:   hsl(var(--secondary)) !important;
  --bg-quaternary: hsl(var(--accent)) !important;

  --border-primary:   hsl(var(--border)) !important;
  --border-secondary: hsl(var(--border)) !important;
  /* --border-tertiary removed: zero consumers across the codebase. */

  /* --accent-* shim removed: every consumer migrated to
     hsl(var(--primary)) directly. The dark/light/hover variants in
     the legacy palette were aspirational — none of the actual
     consumer rules darkened or lightened, they all painted flat
     primary. Anything that wants a hover-darken effect now uses
     `hsl(var(--primary) / 0.9)` inline. */

  /* --success-color / --error-color / --warning-color shim removed:
     every consumer migrated to hsl(var(--success / --destructive /
     --warning)) directly, so no remapping needed. */
}