/* Hallmark · macrostructure: Marquee Hero · tone: modern-minimal · anchor hue: 230 */

:root {
  /* ─── Colours ─── */
  --color-paper:        oklch(99% 0.005 230);
  --color-paper-2:      oklch(97% 0.008 230);
  --color-surface:      oklch(97% 0.010 230);
  --color-surface-2:    oklch(94% 0.014 230);
  --color-ink:          oklch(12% 0.020 230);
  --color-ink-2:        oklch(40% 0.020 230);
  --color-ink-3:        oklch(45% 0.012 230);
  --color-white:        oklch(100% 0 0);
  --color-rule:         oklch(88% 0.012 230);
  --color-accent:       oklch(50% 0.068 231);
  --color-accent-soft:  oklch(95% 0.016 231);
  --color-accent-mid:   oklch(69% 0.053 231);
  --color-cta:          oklch(50% 0.068 231);
  --color-cta-hover:    oklch(44% 0.075 231);

  /* Logo gradient */
  --grad-logo-top:    #76D6FF;
  --grad-logo-bottom: #2A96FF;

  /* Dark surface (privacy section) */
  --color-dark-bg:      oklch(12% 0.020 230);
  --color-dark-surface: oklch(18% 0.020 230);
  --color-dark-border:  oklch(25% 0.020 230);
  --color-dark-text:    oklch(75% 0.010 230);
  --color-dark-text-2:  oklch(65% 0.012 230);
  --color-dark-ink:     oklch(40% 0.020 230);
  --color-nav-bg:       oklch(99% 0.005 230 / 0.85);
  --color-ink-hover:    oklch(20% 0.020 230);
  --color-error:        oklch(55% 0.18 25);
  --color-error-bg:     oklch(55% 0.18 25 / 0.06);
  --color-error-border: oklch(55% 0.18 25 / 0.2);
  --color-focus-ring:   oklch(50% 0.068 231 / 0.12);

  /* ─── Typography ─── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-display-s: 3rem;   /* 48px */
  --text-display:   3.75rem;/* 60px */

  --leading-tight:  1.10;
  --leading-snug:   1.25;
  --leading-normal: 1.50;
  --leading-loose:  1.70;

  /* ─── Spacing (4pt scale) ─── */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  --space-sm:  var(--space-4);
  --space-md:  var(--space-8);
  --space-lg:  var(--space-16);
  --space-xl:  var(--space-24);

  /* ─── Layout ─── */
  --max-w:       72rem;   /* 1152px */
  --max-w-prose: 42rem;   /* 672px */
  --gutter:      clamp(var(--space-6), 5vw, var(--space-16));

  /* ─── Radii ─── */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md:  0 4px 12px oklch(0% 0 0 / 0.08), 0 2px 4px oklch(0% 0 0 / 0.04);
  --shadow-lg:  0 12px 40px oklch(0% 0 0 / 0.10), 0 4px 8px oklch(0% 0 0 / 0.05);
  --shadow-screen:   0 24px 80px oklch(50% 0.065 232 / 0.14), 0 8px 24px oklch(0% 0 0 / 0.10);
  --shadow-cta-hover: 0 4px 16px oklch(50% 0.065 232 / 0.28);
  --shadow-btn-hover: 0 6px 20px oklch(0% 0 0 / 0.18);

  /* ─── Easings ─── */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:  cubic-bezier(0.34, 1.3, 0.64, 1);

  /* ─── Durations ─── */
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   350ms;
  --dur-slower: 500ms;
}