/* ROCAD Consulting — Design tokens (mirrors design-system tokens/*.css) */

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

:root {
  /* ---- Base palette ---- */
  --navy-900: #0F172A;
  --navy-800: #16213D;
  --navy-700: #1E293B;
  --navy-600: #29344a;

  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #5B9BFF;

  --cyan-400: #22D3EE;
  --cyan-300: #67E3F4;

  --violet-500: #7C3AED;
  --violet-400: #9761F2;

  --white: #FFFFFF;
  --gray-50: #F3F4F6;
  --gray-100: #E7E9EC;
  --gray-300: #C7CBD3;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-900: #111827;

  --red-500: #EF4444;
  --green-500: #22C55E;

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--cyan-400) 55%, var(--violet-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(34,211,238,0.12) 55%, rgba(124,58,237,0.14));
  --gradient-navy-fade: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  --gradient-cta: linear-gradient(90deg, var(--blue-600), var(--violet-500));
  --gradient-mesh-dark: radial-gradient(circle at 15% 20%, rgba(37,99,235,0.35), transparent 40%),
                         radial-gradient(circle at 85% 15%, rgba(34,211,238,0.25), transparent 45%),
                         radial-gradient(circle at 60% 80%, rgba(124,58,237,0.30), transparent 45%);

  /* ---- Semantic: surfaces ---- */
  --surface-dark: var(--navy-900);
  --surface-dark-raised: var(--navy-800);
  --surface-dark-card: rgba(255,255,255,0.04);
  --surface-dark-card-border: rgba(255,255,255,0.10);
  --surface-light: var(--white);
  --surface-light-alt: var(--gray-50);
  --surface-light-card: var(--white);
  --surface-light-card-border: rgba(15,23,42,0.08);

  /* ---- Semantic: text ---- */
  --text-on-dark-primary: var(--white);
  --text-on-dark-secondary: rgba(255,255,255,0.68);
  --text-on-dark-tertiary: rgba(255,255,255,0.44);
  --text-on-light-primary: var(--navy-900);
  --text-on-light-secondary: var(--gray-700);
  --text-on-light-tertiary: var(--gray-500);
  --text-accent: var(--blue-600);
  --text-accent-on-dark: var(--cyan-400);

  /* ---- Semantic: interactive ---- */
  --action-primary: var(--blue-600);
  --action-primary-hover: #1D4ED8;
  --action-primary-active: #1E40AF;
  --action-on-dark: var(--white);
  --action-on-dark-hover: rgba(255,255,255,0.88);

  /* ---- Semantic: borders ---- */
  --border-on-light: rgba(15,23,42,0.10);
  --border-on-dark: rgba(255,255,255,0.12);

  /* ---- Semantic: status ---- */
  --status-negative: var(--red-500);
  --status-positive: var(--green-500);
  --status-info: var(--cyan-400);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --text-display-xl: 700 clamp(2.75rem, 4.5vw, 4.5rem) / 1.05 var(--font-display);
  --text-display-lg: 700 clamp(2.25rem, 3.4vw, 3.25rem) / 1.08 var(--font-display);
  --text-display-md: 600 clamp(1.75rem, 2.4vw, 2.25rem) / 1.15 var(--font-display);
  --text-display-sm: 600 1.5rem/1.25 var(--font-display);

  --text-body-lg: 400 1.25rem/1.55 var(--font-body);
  --text-body-md: 400 1.0625rem/1.6 var(--font-body);
  --text-body-sm: 400 0.9375rem/1.55 var(--font-body);

  --text-label-lg: 600 0.9375rem/1.3 var(--font-body);
  --text-label-md: 600 0.8125rem/1.3 var(--font-body);
  --text-eyebrow: 700 0.75rem/1.3 var(--font-body);

  --text-mono-md: 500 0.9375rem/1.5 var(--font-mono);
  --text-mono-sm: 500 0.8125rem/1.5 var(--font-mono);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.12em;

  /* ---- Spacing / radius / shadow / motion ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
  --shadow-glow-blue: 0 0 32px rgba(37,99,235,0.35);
  --shadow-glow-cyan: 0 0 32px rgba(34,211,238,0.30);
  --shadow-glow-violet: 0 0 32px rgba(124,58,237,0.30);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-md: 300ms;
  --duration-slow: 600ms;
  --duration-node: 2400ms;

  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 80px);
}