/* =============================================
   RADICAL OPERATIONS — DESIGN TOKENS
   Brand: Red #D62B1F, Black #0D0D0D, White #FAFAFA
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ─── COLORS ─── */
  --color-brand-red:     #D62B1F;
  --color-brand-red-dim: #A82117;
  --color-brand-red-bg:  rgba(214, 43, 31, 0.10);
  --color-ink:           #0D0D0D;
  --color-ink-80:        rgba(13, 13, 13, 0.80);
  --color-paper:         #FAFAFA;
  --color-warm-neutral:  #F5F1EC;
  --color-muted:         #6B6B6B;
  --color-border:        rgba(13, 13, 13, 0.12);
  --color-border-light:  rgba(250, 250, 250, 0.14);
  --color-focus:         #D62B1F;

  /* Glass */
  --glass-dark-bg:    rgba(13, 13, 13, 0.62);
  --glass-dark-bg-sm: rgba(13, 13, 13, 0.48);
  --glass-light-bg:   rgba(250, 250, 250, 0.70);
  --glass-blur:       16px;
  --glass-blur-sm:    10px;

  /* ─── TYPOGRAPHY ─── */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'SFMono-Regular', 'Consolas', monospace;

  /* Sizes */
  --text-hero:    clamp(3.2rem, 7.5vw, 7rem);
  --text-section: clamp(2.4rem, 4.5vw, 4.5rem);
  --text-heading: clamp(1.8rem, 3vw, 3rem);
  --text-card:    clamp(1.1rem, 1.5vw, 1.5rem);
  --text-lead:    clamp(1.05rem, 1.3vw, 1.25rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.75rem;
  --text-btn:     0.9375rem;

  /* ─── SPACING ─── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ─── RADIUS ─── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ─── SHADOWS ─── */
  --shadow-card:   0 2px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.08);
  --shadow-device: 0 24px 64px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.18);
  --shadow-glass:  0 4px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.10);

  /* ─── TIMING ─── */
  --ease-out: cubic-bezier(0.22, 0.68, 0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --t-micro: 140ms;
  --t-fast:  260ms;
  --t-med:   450ms;
  --t-slow:  700ms;

  /* ─── LAYOUT ─── */
  --max-w: 1360px;
  --gutter-xl: 6vw;
  --gutter-md: 32px;
  --gutter-sm: 20px;
  --nav-h: 92px;
}