/* ============================================
   Design Tokens — Post AI Nation
   ============================================ */
:root {
  /* Type — robust system-font fallbacks so text never falls back to a serif
     default (e.g. Times New Roman) if the custom web fonts or stylesheets
     are slow or blocked. */
  --font-display: "Barlow", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Anuphan", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.75rem, 6.5vw, 5.5rem);
  --fs-xxl: 3.75rem; /* ~60px */
  --fs-h1: clamp(2rem, 3.6vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3: 1.375rem;
  --fs-lg: 1.25rem;
  --fs-body-thulo: 1.15rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* Color — ink & neutrals */
  --ink: #111114;
  --ink-soft: #26262c;
  --text-muted: #6b6b76;
  --text-faint: #9a9aa4;
  --white: #ffffff;
  --border: #e5e5e5;
  --border-soft: #ececf3;

  /* Color — hero gradient (near-black to royal blue) */
  --hero-black: #0b0b10;
  --hero-indigo: #171a4a;
  --hero-blue-deep: #1c2496;
  --hero-blue: #2135c7;
  --hero-blue-bright: #2c44e0;

  /* Color — section backgrounds */
  --bg-lavender: #eeedf7;
  --bg-lavender-2: #f4f3fb;
  --bg-lavender-3: #dfe0f7;
  --bg-peach: #fbe8e1;
  --bg-peach-2: #fdf1ea;
  --bg-cream: #fdf9f6;

  /* Color — accents */
  --accent-blue: #1e46d6;
  --accent-blue-dark: #16309e;
  --accent-red: #e0524a;
  --accent-star: #f5b942;
  --accent-orange: #eaa876;
  --accent-periwinkle: rgba(150, 150, 250, .2);
  --accent-periwinkle-white: rgba(255, 255, 255, .1);

  /* Buttons */
  --btn-dark: #17171a;
  --btn-dark-hover: #2a2a30;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(17,17,20,0.04), 0 12px 32px -12px rgba(17,17,20,0.12);
  --shadow-pill: 0 2px 10px rgba(0,0,0,0.25);

  /* Grain texture — one shared tiled SVG feTurbulence noise, not an image
     asset. Explicit small viewBox + high baseFrequency keeps each grain a
     couple CSS px (fine static, not soft cloud-like blobs); alpha is baked
     in so it composites under mix-blend-mode:overlay without needing to
     touch the whole element's own opacity (which would fade its content). */
  --noise-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='0.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-size: 80px;
  /* Softer variant for spots where the full-strength grain above reads as
     too much — same grain scale, milder contrast boost and lower baked-in
     alpha. Used on .cta-band .container and (mobile only) .layers__point. */
  --noise-bg-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncG type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncB type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncA type='linear' slope='0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Layout */
  --container: 1200px;
  --gutter: 24px;

  /* Space scale */
  --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;

  /* Dot grid */
  --dot-color: rgba(17, 17, 20, 0.16);
  --dot-color-light: rgba(255, 255, 255, 0.22);
  --dot-size: 2.5px;
  --dot-gap: 22px;

  /* Motion — scroll/load reveal system. Expo-out curve (steep at the start,
     long slow settle at the end) reads as "premium" rather than mechanical
     because most of its duration is spent easing to rest, not accelerating. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal-sm: 700ms;
  --dur-reveal: 900ms;
  --dur-reveal-lg: 1200ms;
}