/* Premium Design Tokens — Editorial SaaS scale */

:root {
  /* Typography — balanced, not aggressive */
  --font-display: clamp(2.75rem, 2.4rem + 1.2vw, 4rem);      /* 44–64px hero */
  --font-h2: clamp(2rem, 1.8rem + 0.6vw, 3rem);               /* 32–48px */
  --font-h3: clamp(1.5rem, 1.4rem + 0.35vw, 1.875rem);        /* 24–30px */
  --font-h4: 1.25rem;
  --font-body: 1.125rem;                                         /* 18px */
  --font-body-sm: 1rem;
  --font-caption: 0.8125rem;

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.7;

  --weight-display: 700;
  --weight-heading: 600;
  --weight-body: 400;
  --weight-medium: 500;

  /* Spacing */
  --section-y: clamp(5rem, 4rem + 3vw, 7.5rem);
  --section-y-sm: clamp(3.5rem, 3rem + 2vw, 5rem);

  /* Radius */
  --radius-card: 1rem;
  --radius-card-lg: 1.25rem;
  --radius-widget: 0.875rem;

  /* Shadows — layered depth */
  --shadow-elev-1: 0 1px 2px rgba(12, 18, 34, 0.04), 0 2px 8px rgba(12, 18, 34, 0.03);
  --shadow-elev-2: 0 4px 16px rgba(12, 18, 34, 0.06), 0 12px 40px rgba(12, 18, 34, 0.05);
  --shadow-elev-3: 0 8px 30px rgba(12, 18, 34, 0.08), 0 24px 60px rgba(12, 18, 34, 0.07);
  --shadow-glow: 0 0 80px rgba(37, 99, 235, 0.12);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: 12px;

  /* Surfaces */
  --surface-dark: #0a0f1a;
  --surface-dark-2: #111827;
  --surface-muted: #f6f8fb;
  --surface-gradient: linear-gradient(180deg, #fafbfd 0%, #f0f4fa 100%);
}

/* Global editorial typography when tokens are loaded */
body {
  font-size: var(--font-body);
  line-height: var(--leading-body);
}

h1 { font-weight: var(--weight-display); letter-spacing: -0.028em; }
h2 { font-size: var(--font-h2); font-weight: var(--weight-display); letter-spacing: -0.022em; line-height: var(--leading-snug); }
h3 { font-size: var(--font-h3); font-weight: var(--weight-heading); }
h4 { font-size: var(--font-h4); font-weight: var(--weight-heading); }