/* ══════════════════════════════════════════════════════════════════
   We Love Marketing — Design Tokens
   Colors, type, radii, shadows, spacing — source of truth.
   Mirrors app/globals.css in the production Next.js codebase.
   ══════════════════════════════════════════════════════════════════ */

/* Google Fonts substitutes for Next.js font loaders:
   Bricolage Grotesque (display), Geist (body), Instrument Serif (accent) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── Base surfaces — dark, warm-neutral */
  --color-base: #0A0A0A;
  --color-surface: #111111;
  --color-surface-muted: #161616;
  --color-surface-elevated: #1A1A1A;

  /* ── Glass panel backgrounds (on dark bg) */
  --color-panel: rgba(255, 255, 255, 0.03);
  --color-panel-hover: rgba(255, 255, 255, 0.05);
  --color-panel-strong: rgba(255, 255, 255, 0.06);
  --color-panel-input: rgba(255, 255, 255, 0.04);

  /* ── Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.05);

  /* ── Primary — warm coral/red ("love" heart color) */
  --color-primary: #E63946;
  --color-primary-hover: #D62839;
  --color-primary-soft: #FF6B6B;
  --color-primary-bg: rgba(230, 57, 70, 0.08);
  --color-primary-border: rgba(230, 57, 70, 0.25);
  --color-primary-light: rgba(230, 57, 70, 0.12);
  --color-primary-subtle: rgba(230, 57, 70, 0.06);
  --color-primary-glow: rgba(230, 57, 70, 0.35);

  /* ── Secondary — warm amber (gradient partner) */
  --color-accent: #F59E0B;
  --color-accent-light: rgba(245, 158, 11, 0.12);

  /* ── Semantic status */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.08);
  --color-success-border: rgba(16, 185, 129, 0.25);

  /* ── Foreground / text hierarchy */
  --color-heading: #FAFAF9;    /* fg1 — headings, strong text */
  --color-text: #FAFAF9;       /* fg1 — primary body on dark */
  --color-text-secondary: #D4D4D4;  /* fg2 — subdued body */
  --color-body: #A3A3A3;       /* fg3 — soft paragraph text */
  --color-muted: #737373;      /* fg4 — captions, footnotes */
  --color-faint: #525252;      /* fg5 — placeholder, ©, dividers-as-text */
  --color-inverse: #0A0A0A;    /* black on a warm fill */

  /* ── Signature gradients */
  --gradient-primary: linear-gradient(135deg, #E63946 0%, #FF6B6B 50%, #E63946 100%);
  --gradient-warm:    linear-gradient(135deg, #E63946 0%, #FF6B6B 40%, #F59E0B 100%);
  --gradient-text:    linear-gradient(135deg, #E63946 0%, #FF6B6B 40%, #E63946 100%);
  --gradient-divider: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.2), transparent);

  /* ── Corner radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 60px;
  --radius-full: 9999px;

  /* ── Shadows */
  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md:      0 12px 40px rgba(0, 0, 0, 0.2);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.25);
  --shadow-primary: 0 12px 32px rgba(230, 57, 70, 0.15);
  --shadow-btn:     0 1px 2px rgba(230, 57, 70, 0.2),
                    0 4px 12px rgba(230, 57, 70, 0.15),
                    0 12px 32px rgba(230, 57, 70, 0.1);
  --shadow-btn-hover: 0 1px 2px rgba(230, 57, 70, 0.25),
                      0 6px 20px rgba(230, 57, 70, 0.25),
                      0 20px 50px rgba(230, 57, 70, 0.15);

  /* ── Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* the signature easing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing / layout */
  --section-pad-y: 100px;
  --section-pad-y-mobile: 72px;
  --container-max: 1200px;
  --container-narrow: 720px;
  --scroll-offset: 96px;

  /* ── Typography families */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-accent:  "Instrument Serif", Georgia, serif;

  /* ── Semantic type steps (fluid) */
  --text-display-1: clamp(44px, 7vw, 76px);   /* hero */
  --text-display-2: clamp(34px, 5vw, 54px);   /* section titles */
  --text-display-3: clamp(26px, 3.5vw, 36px); /* card titles */
  --text-lead:      clamp(16px, 1.4vw, 18px);
  --text-body:      15px;
  --text-small:     14px;
  --text-caption:   13px;
  --text-micro:     11px;
}

/* ══════════════════════════════════════════════════════════════════
   Semantic element defaults — apply in any page that links this file
   ══════════════════════════════════════════════════════════════════ */

body {
  background: var(--color-base);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  font-weight: 700;
}

h1 { font-size: var(--text-display-1); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: var(--text-display-2); line-height: 1.08; letter-spacing: -0.03em;  font-weight: 800; }
h3 { font-size: var(--text-display-3); line-height: 1.15; }

p        { color: var(--color-body);  line-height: 1.7; }
a        { color: var(--color-primary); text-decoration: none; }
a:hover  { color: var(--color-primary-soft); }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }

::selection { background: var(--color-primary); color: #fff; }

/* Utility: gradient text */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-warm {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pill badge — the signature section label */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
}

/* Glass card */
.glass-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border-subtle);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease-out);
}
.glass-card:hover {
  border-color: var(--color-primary-border);
  background: var(--color-panel-hover);
}