/* ══════════════════════════════════════════════════════════
   Design Tokens — CyberDD Executive Dashboard
   All CSS custom properties: colour, typography, spacing,
   radii, shadows, transitions.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-ui:      'Geist', 'SF Pro Text', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* ── Type Scale (size / line-height) ── */
  --text-xs:   0.6875rem;  /* 11px */
  --lh-xs:     1.4;
  --text-sm:   0.8125rem;  /* 13px */
  --lh-sm:     1.5;
  --text-base: 0.9375rem;  /* 15px */
  --lh-base:   1.6;
  --text-lg:   1.125rem;   /* 18px */
  --lh-lg:     1.4;
  --text-xl:   1.375rem;   /* 22px */
  --lh-xl:     1.3;
  --text-2xl:  1.75rem;    /* 28px */
  --lh-2xl:    1.2;
  --text-hero: 3rem;       /* 48px */
  --lh-hero:   1.1;

  /* ── Spacing (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

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

  /* ── Transition ── */
  --transition: 300ms ease;
  --transition-fast: 150ms ease;
  --transition-hover: 200ms ease;

  /* ── Risk Colours (identical in both modes) ── */
  --risk-critical:  #FF4D4D;
  --risk-high:      #FF8C42;
  --risk-medium:    #F5C842;
  --risk-low:       #42C97A;
  --risk-info:      #5BB8FF;

  --risk-critical-bg: rgba(255, 77, 77, 0.10);
  --risk-high-bg:     rgba(255, 140, 66, 0.10);
  --risk-medium-bg:   rgba(245, 200, 66, 0.10);
  --risk-low-bg:      rgba(66, 201, 122, 0.10);
  --risk-info-bg:     rgba(91, 184, 255, 0.10);

  /* ── Layout ── */
  --topbar-h:  64px;
  /* Fixed chrome below status bar; use with viewport-fit=cover for notch devices */
  --cydd-topbar-stack-h: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  --sidebar-w: 220px;
  /* CYDD shell: icon rail + mobile drawer (overridden on #cydd-app-root) */
  --cydd-sidebar-rail-w: 60px;
  --cydd-sidebar-drawer-w: min(280px, 86vw);
  --content-max: 1280px;
  /* Main column padding (narrowed ≤720px on body.portal-cydd-shell in cydd-customer-portal.css) */
  --cydd-main-padding-x: var(--sp-10);
  --cydd-main-padding-y: var(--sp-10);
}