/* Brand tokens mirrored from marketing-kit/web/src/styles/tokens.css (source of truth:
   marketing-kit brand/tokens.json). Portal semantic layer (dark ops-console) below.
   See DESIGN.md for how these are used — do not invent colors outside this file. */
:root {
  /* --- brand base (from marketing-kit) --- */
  --color-slate-600: #3C424B;
  --color-slate-700: #31363E;
  --color-slate-800: #2B3038;
  --color-slate-850: #23272E;
  --color-slate-900: #1B1F24;
  --color-copper-base: #C2703D;
  --color-copper-dark: #A85A2C;
  --color-copper-light: #D98A5A;
  --color-cream: #F4F2EE;
  --color-cardline: #E2DDD5;
  --color-ink: #23272E;
  --color-lighttext: #CBCFD4;
  --color-mute: #8A929B;
  --color-white: #FFFFFF;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- portal semantic layer (dark surface) --- */
  --surface-0: #16191D;
  --surface-1: var(--color-slate-900);
  --surface-2: var(--color-slate-850);
  --surface-3: var(--color-slate-800);
  --hairline: rgba(203, 207, 212, 0.10);
  --hairline-strong: rgba(203, 207, 212, 0.18);

  --text-hi: var(--color-cream);
  --text: var(--color-lighttext);
  --text-mute: var(--color-mute);

  --copper: var(--color-copper-base);
  --copper-light: var(--color-copper-light);
  --copper-dark: var(--color-copper-dark);

  /* status — reserved; icon+label always accompany (never color alone) */
  --good: #0CA30C;
  --warning: #FAB219;
  --critical: #D03B3B;
  --good-glow: rgba(12, 163, 12, 0.16);
  --warning-glow: rgba(250, 178, 25, 0.16);
  --critical-glow: rgba(208, 59, 59, 0.18);

  /* ring/bar STROKE colors only — softer, desaturated so filled arcs don't glare
     on the dark canvas. Icons + text labels still use the full --good/--warning/
     --critical tokens above. */
  --ring-good: #3FA45C;
  --ring-warning: #E3A63C;
  --ring-critical: #D65B58;

  /* elevation */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 16px 40px -16px rgba(0,0,0,.6);

  /* rhythm */
  --wrap-max: 1180px;
  --gutter: 32px;
  --radius: 12px;
  --radius-sm: 8px;

  /* type scale (1.25) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 900ms;
}

@media (max-width: 640px) {
  :root { --gutter: 24px; }
}