/* Design tokens from the SMC Portals Brand Guideline v1.0 (IT Operations & Digital
   Enablement). Light theme only - the dark theme in the guideline is a proposal that
   still needs IT Operations sign-off before it ships. Components reference these as
   CSS variables only, never as literal hex values. */
:root {
  --surface-page: #f3f3f1;
  --surface-card: #ffffff;
  --surface-sunken: #f7f7f5;
  --surface-muted: #e9e9e5;

  --border-subtle: #efefec;
  --border: #e0e0dc;
  --border-strong: #d3d3ce;
  --border-control: #8a8f98;

  --ink: #16181d;
  --ink-2: #3f434b;
  --ink-muted: #5a5f68;

  --accent: #0a6e94;
  --accent-hover: #075574;
  --on-accent: #ffffff;
  --accent-soft: #e8f5fa;
  --accent-soft-border: #cde7f1;
  --accent-ink: #0a5a7a;

  --entity-smc: #ffe700;
  --entity-vibes: #cc2652;
  --entity-media: #00b4e5;
  --logo-ink: #0f1822;

  --success-bg: #ddf0e5;
  --success-ink: #1f6b3e;
  --warning-bg: #fff1d6;
  --warning-ink: #7a4a00;
  --warning-panel: #fff7e6;
  --warning-panel-border: #f0d49a;
  --warning-panel-ink: #5c3800;
  --danger-bg: #fde7e8;
  --danger-ink: #9b1c24;
  --danger-border: #e4a9ad;

  --font-display: 'Space Grotesk', Arial, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, Tahoma, sans-serif;
  --font-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-14: 56px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 20px;
  --radius-round: 50%;

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 48px;
  --header-height: 64px;
  --stripe-height: 4px;
  --content-max: 1280px;

  --shadow-focus: 0 0 0 3px rgba(10, 110, 148, 0.35);
  --shadow-raised: 0 8px 24px rgba(22, 24, 29, 0.08);
}

html[lang='en'] {
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}