/* ==========================================================================
   Alignmates — Design Tokens
   Primitives -> semantic surface tokens -> spacing/radius/shadow.
   Dark product sections and calm light narrative sections coexist on the
   SAME page — this is not a light/dark theme toggle.
   ========================================================================== */

:root {
  /* ---- Primitives: brand purple ---- */
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-900: #3b1b78;

  /* ---- Primitives: near-black navy ---- */
  --navy-950: #0a0a12;
  --navy-900: #12121c;
  --navy-850: #16161f;
  --navy-800: #1b1b29;
  --navy-700: #262636;
  --navy-500: #4a4a5e;

  /* ---- Primitives: light neutrals ---- */
  --cloud-50: #fafafc;
  --cloud-100: #f2f1f7;
  --cloud-200: #e6e4f0;
  --cloud-400: #c7c4d6;

  /* ---- Primitives: text ---- */
  --ink-900: #14121f;
  --lavender-400: #a8a6bd;
  --slate-600: #5b586e;

  /* ---- Primitives: secondary accents (from real in-app post themes) ---- */
  --cyan-500: #22d3ee;
  --green-500: #34d399;
  --orange-500: #fb923c;
  --pink-500: #f472b6;

  /* ---- Primitives: semantic ---- */
  --success-500: #34d399;
  --warning-500: #fbbf24;
  --danger-500: #f87171;

  --white: #ffffff;

  /* ---- Semantic: dark surfaces (product-heavy sections) ---- */
  --dark-bg-page: var(--navy-950);
  --dark-bg-surface: var(--navy-900);
  --dark-bg-surface-raised: var(--navy-800);
  --dark-text-primary: var(--white);
  --dark-text-secondary: var(--lavender-400);
  --dark-border: var(--navy-700);
  --dark-accent: var(--purple-500);

  /* ---- Semantic: light surfaces (calm narrative sections) ---- */
  --light-bg-page: var(--cloud-50);
  --light-bg-surface: var(--white);
  --light-bg-surface-tint: var(--cloud-100);
  --light-text-primary: var(--ink-900);
  --light-text-secondary: var(--slate-600);
  --light-border: var(--cloud-400);
  --light-accent: var(--purple-600);

  /* ---- Spacing scale ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-160: 160px;

  /* ---- Radius scale ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 999px;

  /* ---- Shadows (restrained) ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.28);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.4);
  --glow-purple: 0 0 48px rgba(139, 92, 246, 0.3);

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", "Sora", "Manrope", "Inter", sans-serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;

  /* ---- Layout widths ---- */
  --content-max: 1280px;   /* default page container */
  --content-wide: 1340px;  /* wide product stages */
  --measure-copy: 660px;   /* readable paragraph */
  --measure-lede: 940px;   /* editorial statement */
  --outer-margin: 64px;

  /* ---- Motion tokens ---- */
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 520ms;
  --motion-reveal: 700ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1100px) {
  :root {
    --outer-margin: 40px;
  }
}

@media (max-width: 700px) {
  :root {
    --outer-margin: 20px;
  }
}