/* ═══════════════════════════════════════════════════════════════
   BlueWhale Stack — Design Tokens
   Source of truth for all colors, typography, spacing, motion
   Version 1.0
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand — from official BlueWhale Stack logo (BWCS-logomark) */
  --brand-deep: #002DA1;        /* Official brand blue — matches logomark exactly */
  --brand-blue: #1E6FDB;        /* Interactive color — buttons, links, active states */
  --brand-sky: #E8F2FF;
  --brand-ink: #0A1628;
  --brand-white: #FFFFFF;

  /* Backgrounds (Light) */
  --bg-canvas: #FAFBFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F3F5F8;
  --bg-hover: #F3F5F8;
  --bg-active: #E8F2FF;

  /* Text (Light) */
  --text-primary: #0A1628;
  --text-secondary: #4A5A70;
  --text-tertiary: #7A8494;
  --text-inverse: #FFFFFF;
  --text-accent: #1E6FDB;
  --text-disabled: #A0AAB8;

  /* Borders (Light) */
  --border-default: #E3E8EF;
  --border-strong: #CBD3DF;
  --border-accent: #1E6FDB;

  /* Primary */
  --primary-bg: #1E6FDB;
  --primary-hover: #1859B0;
  --primary-active: #134087;
  --primary-fg: #FFFFFF;

  /* Status */
  --success-bg: #E6F4EA;
  --success-fg: #1E6F3E;
  --success-border: #9FD7B3;

  --warning-bg: #FEF4E0;
  --warning-fg: #8A5A00;
  --warning-border: #F3C97A;

  --danger-bg: #FDECEC;
  --danger-fg: #A9231C;
  --danger-border: #F0A4A0;

  --info-bg: #E8F2FF;
  --info-fg: #1E6FDB;
  --info-border: #B4D4F7;

  /* Severity */
  --sev-critical: #A9231C;
  --sev-high: #D94A42;
  --sev-medium: #D68B00;
  --sev-low: #718096;
  --sev-info: #1E6FDB;

  /* Data viz palette */
  --viz-1: #1E6FDB;
  --viz-2: #F5A623;
  --viz-3: #2E7D6B;
  --viz-4: #B74BC8;
  --viz-5: #D94A42;
  --viz-6: #8C5F31;
  --viz-7: #4A7C84;
  --viz-8: #6F8F23;

  /* Cloud brand colors */
  --cloud-aws: #FF9900;
  --cloud-azure: #0078D4;
  --cloud-gcp: #4285F4;
  --cloud-oci: #F80000;
  --cloud-ibm: #054ADA;
  --cloud-alibaba: #FF6A00;
  --cloud-huawei: #C7000B;
  --cloud-vmware: #607D8B;
  --cloud-nutanix: #024DA1;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas,
               'Courier New', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Spacing */
  --space-0: 0;
  --space-0_5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(10, 22, 40, 0.08),
               0 2px 4px -2px rgba(10, 22, 40, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(10, 22, 40, 0.10),
               0 4px 6px -4px rgba(10, 22, 40, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(10, 22, 40, 0.12),
               0 8px 10px -6px rgba(10, 22, 40, 0.08);
  --shadow-focus: 0 0 0 3px rgba(30, 111, 219, 0.15);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-deliberate: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;
  --content-max-width: 1440px;
}

/* Dark mode */
[data-theme='dark'] {
  --bg-canvas: #0A1628;
  --bg-surface: #101E36;
  --bg-elevated: #152747;
  --bg-sunken: #081226;
  --bg-hover: #152747;
  --bg-active: #1A3567;

  --text-primary: #F3F5F8;
  --text-secondary: #A8B3C3;
  --text-tertiary: #6C7890;
  --text-accent: #5EA1F2;
  --text-disabled: #4A5A70;

  --border-default: #21324D;
  --border-strong: #2E456B;
  --border-accent: #5EA1F2;

  --primary-bg: #5EA1F2;
  --primary-hover: #7AB4F7;
  --primary-active: #4888D6;
  --primary-fg: #0A1628;

  --success-bg: #0E2A1B;
  --success-fg: #7CD9A0;
  --success-border: #1E6F3E;

  --warning-bg: #2A1E0A;
  --warning-fg: #F5C06A;
  --warning-border: #8A5A00;

  --danger-bg: #2E1111;
  --danger-fg: #F17A72;
  --danger-border: #A9231C;

  --info-bg: #102546;
  --info-fg: #7AB4F7;
  --info-border: #1E6FDB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(94, 161, 242, 0.25);
}

/* Respect OS preference by default */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-canvas: #0A1628;
    --bg-surface: #101E36;
    --bg-elevated: #152747;
    --bg-sunken: #081226;
    --bg-hover: #152747;
    --bg-active: #1A3567;
    --text-primary: #F3F5F8;
    --text-secondary: #A8B3C3;
    --text-tertiary: #6C7890;
    --text-accent: #5EA1F2;
    --border-default: #21324D;
    --border-strong: #2E456B;
    --border-accent: #5EA1F2;
    --primary-bg: #5EA1F2;
    --primary-hover: #7AB4F7;
    --primary-active: #4888D6;
    --primary-fg: #0A1628;
  }
}

/* Reset / base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, kbd {
  font-family: var(--font-mono);
}

/* Utility — tabular nums for data */
.num {
  font-variant-numeric: tabular-nums;
}