/* ============================================================
   Beesy Observability — tokens
   Accent from logo cyan, denser ops console (not SaaS-kit)
   ============================================================ */

:root {
  --brand-50: #E8F8FC;
  --brand-100: #C5EEF7;
  --brand-200: #8FDEEF;
  --brand-300: #5EC8E3;
  --brand-400: #3BB4D4;
  --brand-500: #2A9CB8;
  --brand-600: #217E96;
  --brand-700: #1B6478;
  --brand-800: #164E5E;
  --brand-900: #113C48;

  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 4px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 18px;
  --sp-6: 22px;
  --sp-8: 28px;

  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-disp: "IBM Plex Sans", var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 21px;
  --fs-3xl: 26px;

  --dur-fast: 90ms;
  --dur: 160ms;
  --dur-slow: 240ms;
  --ease-out: ease-out;
  --ease-in-out: ease;
}

:root,
:root[data-theme="dark"] {
  --bg: #0E1013;
  --surface: #161A1F;
  --surface-2: #1C2128;
  --surface-3: #232A32;
  --border: #2C343E;
  --border-soft: #232930;
  --text: #E8EAED;
  --text-2: #A8B0B8;
  --text-3: #6E767E;

  --accent: var(--brand-300);
  --accent-solid: var(--brand-400);
  --accent-hover: var(--brand-200);
  --accent-ink: #0B1216;
  --accent-soft: rgba(59, 180, 212, .12);
  --accent-line: rgba(59, 180, 212, .32);

  --ok: #3D9B74;
  --warn: #C9922A;
  --crit: #D45A5A;
  --disaster: #B33A52;
  --info: #6A9BB8;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .35);
  --ring: 0 0 0 2px rgba(59, 180, 212, .45);

  --skel-base: #1C2128;
  --skel-sheen: rgba(255, 255, 255, .05);

  --chart-grid: rgba(255, 255, 255, .05);
  --chart-ink: #6E767E;
  --chart-tip-bg: #232A32;

  --paco: var(--accent-solid);
  --paco-deep: var(--brand-700);
  --marca: var(--brand-400);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --ink: var(--text);
  --ink-mid: var(--text-2);
  --ink-dim: var(--text-3);
  --line: var(--border);
  --line-soft: var(--border-soft);
  --radius: var(--r-lg);
  --mono: var(--font-mono);
  --disp: var(--font-disp);
  --body: var(--font-body);
}

:root[data-theme="light"] {
  --bg: #EDEEEF;
  --surface: #F7F7F8;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --border: #D5D8DC;
  --border-soft: #E3E5E8;
  --text: #1A1D21;
  --text-2: #4A5158;
  --text-3: #6E757C;

  --accent: var(--brand-600);
  --accent-solid: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(42, 156, 184, .1);
  --accent-line: rgba(42, 156, 184, .28);

  --ok: #2A7A58;
  --warn: #9A6E14;
  --crit: #B83C3C;
  --disaster: #922E44;
  --info: #3D6F8A;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 8px 24px rgba(20, 24, 28, .1);
  --ring: 0 0 0 2px rgba(42, 156, 184, .3);

  --skel-base: #E4E6E8;
  --skel-sheen: rgba(255, 255, 255, .8);

  --chart-grid: rgba(20, 24, 28, .08);
  --chart-ink: #6E757C;
  --chart-tip-bg: #FFFFFF;
}

html.theme-anim,
html.theme-anim * {
  transition: background-color var(--dur) var(--ease-in-out),
    border-color var(--dur) var(--ease-in-out),
    color var(--dur) var(--ease-in-out),
    box-shadow var(--dur) var(--ease-in-out) !important;
}