/**
 * CONNECT AHEAD — DESIGN TOKENS
 * Derived directly from Connect Ahead Brand Identity System
 */

:root {
  /* Brand Core Palette */
  --color-navy: #0B2D3A;        /* Primary: Trust, Authority */
  --color-teal: #2ED3A6;        /* Accent: Progress, Growth */
  --color-aqua: #DFF6F2;        /* Light Accent: Calm, Tinted Cards */
  --color-offwhite: #F7F9F8;    /* Surface: Clean, Spacious Canvas */
  --color-slate: #475569;       /* Typography: Body, Secondary UI */
  --color-white: #FFFFFF;       /* Pure White: Surfaces, Cards */

  /* Supporting Shades */
  --color-navy-dark: #071D26;   /* Darker Navy for footers, contrast overlays */
  --color-navy-light: #153C4D;  /* Lighter Navy for hovers, borders */
  --color-teal-hover: #26B891;  /* Darker teal for button hover */
  --color-teal-light: #E7FAF5;  /* Subtle teal tint for pill badges */
  --color-slate-dark: #1E293B;  /* High-contrast headings on light surfaces */
  --color-slate-light: #64748B; /* Meta info, timestamps, secondary labels */
  --color-border: #E2E8F0;      /* Clean neutral borders */
  --color-border-subtle: #EDF2F7;
  --color-card-bg: #FFFFFF;

  /* Status Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* Typography */
  --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --container-max-width: 1180px;
  --container-narrow-width: 840px;
  --container-padding: 24px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(11, 45, 58, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 45, 58, 0.08);
  --shadow-lg: 0 10px 25px -5px rgba(11, 45, 58, 0.1), 0 8px 10px -6px rgba(11, 45, 58, 0.05);
  --shadow-teal: 0 4px 14px rgba(46, 211, 166, 0.35);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-default: 200ms ease-in-out;
  --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}