/* ============================================================
   ComAlerta — Design Tokens (single source of truth)
   See DESIGN-SYSTEM.md. Components read semantic tokens only.
   Load this file BEFORE brand.css.
   ============================================================ */

/* Fonts: Inter (body/UI) · Space Grotesk (display) · JetBrains Mono (numerics) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Tier 1 — primitives ---------- */
  --blue-50: #E2F5FF;  --blue-100: #E4EAFF; --blue-200: #C6D4FF; --blue-300: #A2BAFF;
  --blue-400: #4E8FFF; --blue-500: #749DFF; --blue-600: #1678FF; --blue-700: #115DCB;
  --blue-800: #0E4CA1; --blue-900: #0A3672;

  --orange-50: #FFF6F2; --orange-100: #FFECE5; --orange-200: #FFD7C7; --orange-300: #FFBFA3;
  --orange-400: #FF9E63; --orange-500: #FAA576; --orange-600: #F88522; --orange-700: #E4771E;
  --orange-800: #C6671A; --orange-900: #A15416;

  --grey-50: #F8F8F8; --grey-100: #F1F1F1; --grey-200: #E2E2E2; --grey-300: #C6C6C6;
  --grey-400: #ABABAB; --grey-500: #919191; --grey-600: #777777; --grey-700: #5E5E5E;
  --grey-800: #474747; --grey-900: #1B1B1B;

  --green-500: #0A9E28; --red-500: #D51111; --amber-500: #B26A16;

  /* ---------- Tier 2 — semantic (design-system names) ---------- */
  --color-bg-page: var(--grey-50);
  --color-bg-surface: #FFFFFF;
  --color-bg-muted: var(--grey-100);
  --color-bg-inverse: var(--blue-900);          /* navy — sidebar / footers */

  --color-text: var(--grey-900);
  --color-text-muted-strong: var(--grey-600);
  --color-text-inverse: #FFFFFF;

  --color-action-primary: var(--blue-600);
  --color-action-primary-hover: var(--blue-700);
  --color-action-primary-active: var(--blue-800);
  --color-link: var(--blue-700);
  --color-accent: var(--orange-600);
  --color-accent-text: var(--orange-800);

  --color-focus-ring: rgba(22, 120, 255, 0.45);

  /* ---------- Bootstrap 5 runtime aliases ---------- */
  --bs-primary: var(--color-action-primary);
  --bs-primary-rgb: 22, 120, 255;
  --bs-link-color: var(--color-link);
  --bs-border-radius: 8px;

  /* ========================================================
     Compatibility layer — legacy brand token names mapped to
     ComAlerta values so existing component CSS re-themes with
     no per-rule edits. New code should use the semantic tokens
     above; these remain until components are migrated.
     ======================================================== */

  /* neutral + brand base */
  --brand-gray: var(--grey-500);
  --brand-charcoal: var(--grey-900);            /* neutral dark text/headings */
  --brand-terracotta: var(--blue-600);          /* was terracotta -> brand blue */
  --brand-dusty-rose: var(--orange-600);        /* accent -> orange */
  --brand-warm-brown: var(--orange-800);
  --brand-blush: var(--grey-50);                /* page bg -> neutral */
  --brand-cream: var(--grey-100);
  --brand-white: #FFFFFF;
  --brand-black: #000000;

  /* primary / secondary / accent */
  --color-primary: var(--color-action-primary);
  --color-primary-hover: var(--color-action-primary-hover);
  --color-primary-light: var(--blue-400);
  --color-primary-bg: var(--blue-50);
  --color-secondary: var(--grey-900);
  --color-accent-warm: var(--orange-800);

  /* backgrounds / text / borders */
  --color-bg-muted-legacy: var(--grey-100);
  --color-text-primary: var(--grey-900);
  --color-text-secondary: #5A5A5A;
  --color-text-muted: var(--grey-600);
  --color-border: var(--grey-200);
  --color-border-light: var(--grey-100);

  /* status (explicit — danger is RED, not the brand primary) */
  --color-success: var(--green-500);   --color-success-bg: #E6F7EA;
  --color-warning: var(--amber-500);   --color-warning-bg: #FFF3E6;
  --color-danger:  var(--red-500);     --color-danger-bg:  #FDE7E7;
  --color-info:    var(--blue-700);    --color-info-bg:    var(--blue-50);

  /* sidebar — navy, ComAlerta-branded */
  --sidebar-width: 280px;
  --sidebar-bg: var(--blue-900);
  --sidebar-text: #FFFFFF;
  --sidebar-text-muted: #9FB8E8;               /* light blue — readable on navy */
  --sidebar-hover-bg: var(--blue-800);
  --sidebar-active-bg: var(--blue-600);
  --sidebar-active-text: #FFFFFF;
  --sidebar-border: #14417C;

  /* toggle bar */
  --toggle-bar-width: 20px;
  --toggle-bar-bg: var(--blue-900);
  --toggle-bar-hover: var(--blue-800);
  --toggle-bar-text: #FFFFFF;

  /* typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-serif: 'Space Grotesk', 'Inter', system-ui, sans-serif;   /* display */
  --font-family-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --font-body: var(--font-family-base);
  --font-display: var(--font-family-serif);
  --font-mono: var(--font-family-mono);

  /* "case-file" surfaces — cool digital ledger (was warm paper) */
  --paper-warm: #FBFDFF;
  --paper-aged: #EAF0F8;
  --paper-edge: #D8E2F0;
  --ink-rule: #A9BCD8;
  --ledger-border: #C6D4E8;
  --ledger-border-strong: #9FB4D9;

  /* transitions */
  --transition-speed: 0.3s;
}