/**
 * UmbraDNS Design Tokens — FASE 1
 * Primitives and semantic tokens. Legacy portal variables live in umbra-aliases.css.
 *
 * Open Sans: no local woff2 in repo yet — Google Fonts when network allows.
 * For strict intranet/offline, host woff2 under metrics/static/fonts/ and add @font-face here.
 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

:root {
  /* Brand primitives */
  --umbra-950: #251c44;
  --umbra-800: #492682;
  --umbra-600: #695ba3;
  --umbra-400: #9886be;

  /* Product surfaces */
  --canvas: #0f0d16;
  --surface: #17141f;
  --surface-elevated: #24202e;
  --surface-subtle: #1c1926;

  /* Typography colors */
  --text-primary: #ffffff;
  --text-secondary: #b8b2c2;
  --text-muted: #8e8798;
  --text-disabled: #5c5868;

  /* Borders */
  --border-soft: #d8d4df;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong-umbra: rgba(73, 38, 130, 0.45);

  /* Accent semantics */
  --accent-primary: var(--umbra-800);
  --accent-soft: rgba(73, 38, 130, 0.14);

  /* KPI selected states */
  --kpi-success-bg: var(--status-success-dim);
  --kpi-success-border: rgba(89, 211, 162, 0.42);
  --kpi-success-value: var(--text-primary);
  --kpi-success-label: var(--text-muted);
  --kpi-danger-bg: var(--status-danger-dim);
  --kpi-danger-border: rgba(244, 132, 144, 0.42);
  --kpi-danger-value: var(--status-danger);
  --kpi-danger-label: var(--text-muted);

  /* Status text on dim surfaces (dark defaults) */
  --status-success-text: var(--status-success);
  --status-warning-text: var(--status-warning);
  --status-danger-text: var(--status-danger);
  --status-info-text: var(--status-info);

  /* Operational status (not brand decoration) */
  --status-success: #59d3a2;
  --status-warning: #f2c46d;
  --status-danger: #f48490;
  --status-info: #8fb0ff;

  /* Operational dim surfaces */
  --status-success-dim: rgba(89, 211, 162, 0.14);
  --status-warning-dim: rgba(242, 196, 109, 0.14);
  --status-danger-dim: rgba(244, 132, 144, 0.14);
  --status-info-dim: rgba(143, 176, 255, 0.14);

  /* Policy blocks / threats (orange-red — distinct from generic warning yellow) */
  --policy-block: #ef6c4f;
  --policy-block-dim: rgba(239, 108, 79, 0.14);
  --policy-block-border: rgba(239, 108, 79, 0.28);

  /* Typography */
  --font-family-base: "Open Sans", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Motion (aligned with existing portal motion system) */
  --motion-instant: 80ms;
  --motion-fast: 120ms;
  --motion-standard: 160ms;
  --motion-emphasis: 220ms;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Chart neutrals (data viz baseline) */
  --chart-grid-umbra: rgba(255, 255, 255, 0.06);
  --chart-series-primary: var(--umbra-800);
  --chart-series-secondary: var(--umbra-600);

  /* Foreground on filled accent surfaces (nav active, primary buttons) */
  --text-on-accent: #ffffff;
}

/* Light theme — semantic surfaces and typography (not inverted dark) */
[data-theme="light"] {
  color-scheme: light;

  --canvas: #ebeaf0;
  --surface: #ffffff;
  --surface-elevated: #f6f5fa;
  --surface-subtle: #f0eff5;

  --text-primary: #1a1625;
  --text-secondary: #4a4458;
  --text-muted: #6b6578;
  --text-disabled: #9a94a8;

  --border-soft: #d4d0dc;
  --border-subtle: rgba(37, 28, 68, 0.1);
  --border-default: rgba(37, 28, 68, 0.16);
  --border-strong-umbra: rgba(73, 38, 130, 0.32);

  --accent-soft: rgba(73, 38, 130, 0.1);

  --kpi-success-bg: rgba(26, 107, 79, 0.1);
  --kpi-success-border: rgba(26, 107, 79, 0.32);
  --kpi-success-value: #145a42;
  --kpi-success-label: var(--text-secondary);
  --kpi-danger-bg: rgba(179, 38, 30, 0.1);
  --kpi-danger-border: rgba(179, 38, 30, 0.28);
  --kpi-danger-value: #8f1d16;
  --kpi-danger-label: var(--text-secondary);

  --status-success-text: #1a6b4f;
  --status-warning-text: #8a5a00;
  --status-danger-text: #b3261e;
  --status-info-text: #1565c0;

  --status-success-dim: rgba(26, 107, 79, 0.1);
  --status-warning-dim: rgba(138, 90, 0, 0.1);
  --status-danger-dim: rgba(179, 38, 30, 0.1);
  --status-info-dim: rgba(21, 101, 192, 0.1);

  --policy-block: #c93b2e;
  --policy-block-dim: rgba(201, 59, 46, 0.1);
  --policy-block-border: rgba(201, 59, 46, 0.28);

  --shadow-sm: 0 1px 2px rgba(16, 20, 18, 0.05), 0 1px 3px rgba(16, 20, 18, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 20, 18, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 20, 18, 0.12);

  --chart-grid-umbra: rgba(37, 28, 68, 0.08);

  --text-on-accent: #ffffff;
}