/* ============================================
   Communality Design Tokens
   Light theme: trust-first, professional, approachable
   ============================================ */

:root {
  /* === Colors: Light Mode === */
  --color-white: #ffffff;
  --color-bg: #f8fafc;
  --color-bg-alt: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;

  /* === Primary: Sky Blue (Trust, Security) === */
  --color-primary: #0284c7;
  --color-primary-light: #e0f2fe;
  --color-primary-dark: #075985;
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-glow: rgba(14, 165, 233, 0.12);

  /* === Accent: Amber (CTAs, Highlights) === */
  --color-accent: #d97706;
  --color-accent-light: #fef3c7;
  --color-accent-bg: #fffbeb;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;

  /* === Trust Green === */
  --color-green: #059669;
  --color-green-light: #d1fae5;
  --color-green-50: #ecfdf5;

  /* === Alert Red === */
  --color-red: #dc2626;
  --color-red-light: #fee2e2;

  /* === Product Accents === */
  --accent-safe: #0284c7;
  --accent-safe-light: #e0f2fe;
  --accent-speed: #d97706;
  --accent-speed-light: #fef3c7;
  --accent-pulse: #059669;
  --accent-pulse-light: #d1fae5;

  /* === Text === */
  --color-text: #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;

  /* === Borders === */
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-border-focus: var(--color-primary-500);

  /* === Typography === */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* === Type Scale (responsive) === */
  --text-hero: clamp(36px, 5vw, 64px);
  --text-section: clamp(28px, 3.5vw, 42px);
  --text-sub: clamp(20px, 2.5vw, 26px);
  --text-body-lg: clamp(17px, 1.8vw, 20px);
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 12px;

  /* === Spacing === */
  --section-padding: clamp(64px, 8vw, 112px);
  --container-max: 1200px;
  --container-padding: clamp(20px, 4vw, 40px);
  --card-radius: 12px;
  --card-padding: 24px 28px;
  --btn-radius: 8px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* === Easing === */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Transitions === */
  --dur-hover: 200ms;
  --dur-reveal: 700ms;
}