/**
 * GENERATED — Signal v2.0 · CloudPath. Source of truth: tokens/brands/cloudpath.json. Do not edit by hand.
 */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Raw ramp — ink */
  --c-ink-900: #070A0F;
  --c-ink-800: #11151D;
  --c-ink-750: #1A1F29;
  --c-ink-700: #232A35;
  --c-ink-500: #586173;
  --c-ink-400: #98A2B3;
  --c-ink-200: #C2C9D4;

  /* Raw ramp — fog */
  --c-fog-50: #FFFFFF;
  --c-fog-100: #EEF1F6;
  --c-fog-200: #DCE2EB;
  --c-fog-400: #C7CFDB;

  /* Raw ramp — cyan */
  --c-cyan-base: #007B96;
  --c-cyan-deep: #00637A;
  --c-cyan-light: #34C6E4;
  --c-cyan-hover-dark: #5FD6EE;
  --c-cyan-wash-light: #E2F3F7;
  --c-cyan-wash-dark: #07303B;
  --c-cyan-bright: #00B0D4;

  /* Raw ramp — state */
  --c-state-success: #008857;
  --c-state-success-dark: #2FD18C;
  --c-state-warning: #CF7000;
  --c-state-warning-dark: #FFA740;
  --c-state-danger: #E12D38;
  --c-state-danger-dark: #FF6B73;
  --c-state-info: #5B4BFF;
  --c-state-info-dark: #9486FF;

  /* Semantic roles — LIGHT (default) */
  --background: #EEF1F6;
  --surface: #FFFFFF;
  --surface-sunken: #DCE2EB;
  --foreground: #070A0F;
  --muted: #586173;
  --faint: #98A2B3;
  --on-accent: #FFFFFF;
  --border: #DCE2EB;
  --border-strong: #070A0F;
  --divider: #C7CFDB;
  --accent: #007B96;
  --accent-hover: #00637A;
  --accent-subtle: #E2F3F7;
  --accent-secondary: #00B0D4;
  --success: #008857;
  --warning: #CF7000;
  --danger: #E12D38;
  --info: #5B4BFF;

  /* Fonts */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  /* Type scale — size */
  --type-display: 52px;
  --type-h1: 38px;
  --type-h2: 24px;
  --type-h3: 20px;
  --type-body: 17px;
  --type-caption: 13px;
  --type-eyebrow: 12px;

  /* Type scale — line height */
  --lh-display: 1.02;
  --lh-h1: 1.05;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-body: 1.55;
  --lh-caption: 1.4;

  /* Type scale — tracking */
  --track-display: -0.03em;
  --track-h1: -0.028em;
  --track-h2: -0.02em;
  --track-h3: -0.01em;
  --track-eyebrow: 0.14em;

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

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Motion — durations */
  --motion-fast: 0.15s;
  --motion-snap: 0.18s;
  --motion-base: 0.2s;
  --motion-smooth: 0.25s;
  --motion-medium: 0.3s;

  /* Motion — easing */
  --ease-standard: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-decelerate: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Opacity */
  --opacity-content-done: 0.55;
  --opacity-content-muted: 0.70;
  --opacity-scrim: 0.85;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 64px);

  /* Elevation — LIGHT (geometry + light shadow color) */
  --elev-1: 0px 1px 2px 0px rgba(7, 10, 15, 0.06);
  --elev-2: 0px 4px 12px 0px rgba(7, 10, 15, 0.09);
  --elev-3: 0px 12px 32px 0px rgba(7, 10, 15, 0.13);
  --focus-ring: 0px 0px 0px 3px rgba(0, 123, 150, 0.38);
}

/* Dark peer #1 — OS-level preference, unless explicitly overridden to light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #070A0F;
    --surface: #11151D;
    --surface-sunken: #1A1F29;
    --foreground: #EEF1F6;
    --muted: #98A2B3;
    --faint: #586173;
    --on-accent: #070A0F;
    --border: #232A35;
    --border-strong: #EEF1F6;
    --divider: #586173;
    --accent: #34C6E4;
    --accent-hover: #5FD6EE;
    --accent-subtle: #07303B;
    --accent-secondary: #00B0D4;
    --success: #2FD18C;
    --warning: #FFA740;
    --danger: #FF6B73;
    --info: #9486FF;

    --elev-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
    --elev-2: 0px 4px 12px 0px rgba(0, 0, 0, 0.55);
    --elev-3: 0px 12px 32px 0px rgba(0, 0, 0, 0.6);
    --focus-ring: 0px 0px 0px 3px rgba(52, 198, 228, 0.42);
  }
}

/* Dark peer #2 — explicit opt-in via data-theme attribute */
[data-theme="dark"] {
  --background: #070A0F;
  --surface: #11151D;
  --surface-sunken: #1A1F29;
  --foreground: #EEF1F6;
  --muted: #98A2B3;
  --faint: #586173;
  --on-accent: #070A0F;
  --border: #232A35;
  --border-strong: #EEF1F6;
  --divider: #586173;
  --accent: #34C6E4;
  --accent-hover: #5FD6EE;
  --accent-subtle: #07303B;
  --accent-secondary: #00B0D4;
  --success: #2FD18C;
  --warning: #FFA740;
  --danger: #FF6B73;
  --info: #9486FF;

  --elev-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  --elev-2: 0px 4px 12px 0px rgba(0, 0, 0, 0.55);
  --elev-3: 0px 12px 32px 0px rgba(0, 0, 0, 0.6);
  --focus-ring: 0px 0px 0px 3px rgba(52, 198, 228, 0.42);
}

html,
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  /* Non-negotiable brand policy: tabular numerals everywhere. Do not remove. */
  font-variant-numeric: tabular-nums;
}

/* iOS surfaces render inside a native chrome — defer to the system font there. */
[data-context="app"] {
  font-family: var(--font-system);
}