/* tokens.css — Design tokens for the Astryx-style redesign (colors, type, radius, motion) */
/* NOT for component styles or layout rules; those live in main.css and motion.css */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg-body: #F8F4ED;
  --bg-sheet: #FFFFFF;
  --bg-card: #F6F2EA;
  --bg-card-feature: #E6F0FF;
  --bg-inset: #EFEAE0;
  --bg-nav: rgba(255, 255, 255, 0.78);
  --bg-menu: rgba(248, 244, 237, 0.98);

  /* Ink */
  --ink: #15110C;
  --text: #2A251E;
  --text-subtle: #6B655B;
  --text-faint: #948D80;

  /* Brand */
  --brand: #2B4AC9;
  --brand-strong: #1F3AA8;
  --on-brand: #FFFFFF;
  --brand-soft: rgba(43, 74, 201, 0.10);

  /* Lines */
  --border: rgba(21, 17, 12, 0.14);
  --border-subtle: rgba(21, 17, 12, 0.08);

  /* Pastel chips */
  --chip-blue-bg: #DEE9FF;   --chip-blue-ink: #23418F;
  --chip-pink-bg: #F9DCEA;   --chip-pink-ink: #93325F;
  --chip-lilac-bg: #E6DEF9;  --chip-lilac-ink: #5B3E9E;
  --chip-butter-bg: #F7EAC3; --chip-butter-ink: #7A5A12;
  --chip-mint-bg: #D8F0DF;   --chip-mint-ink: #1F6B3C;

  /* Hero decoration */
  --hero-dot: rgba(21, 17, 12, 0.16);
  --hero-glow: rgba(43, 74, 201, 0.45);
  --hero-wash: radial-gradient(80% 70% at 70% 20%, rgba(247, 234, 195, 0.85), transparent 70%);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(21, 17, 12, 0.05);
  --shadow-md: 0 6px 24px rgba(21, 17, 12, 0.08);
  --shadow-lg: 0 16px 48px rgba(21, 17, 12, 0.12);

  /* Type */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Poppins", "Figtree", system-ui, sans-serif;
  --text-display: clamp(2.5rem, 6vw, 4.25rem);
  --text-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --text-h3: clamp(1.15rem, 2vw, 1.35rem);
  --text-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --text-body: 1rem;
  --text-small: 0.875rem;

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-sheet: clamp(20px, 4vw, 36px);
  --radius-full: 9999px;

  /* Motion */
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 640ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);

  /* Layout */
  --section-gap: clamp(72px, 9vw, 120px);
  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 48px);
  --nav-height: 60px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-body: #111112;
  --bg-sheet: #17181A;
  --bg-card: #1E1F23;
  --bg-card-feature: #1A2333;
  --bg-inset: #232428;
  --bg-nav: rgba(23, 24, 26, 0.72);
  --bg-menu: rgba(17, 17, 18, 0.98);

  --ink: #EDEFF5;
  --text: #D6D9DE;
  --text-subtle: #9AA0A8;
  --text-faint: #6E747D;

  --brand: #8FA5FF;
  --brand-strong: #AEBEFF;
  --on-brand: #0D1330;
  --brand-soft: rgba(143, 165, 255, 0.14);

  --border: rgba(255, 255, 255, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.08);

  --chip-blue-bg: rgba(120, 150, 255, 0.16);  --chip-blue-ink: #A8BCFF;
  --chip-pink-bg: rgba(240, 120, 180, 0.14);  --chip-pink-ink: #F2A8CC;
  --chip-lilac-bg: rgba(170, 140, 250, 0.14); --chip-lilac-ink: #C9B8F5;
  --chip-butter-bg: rgba(245, 205, 100, 0.14);--chip-butter-ink: #EDD289;
  --chip-mint-bg: rgba(110, 220, 150, 0.13);  --chip-mint-ink: #9FDDB4;

  --hero-dot: rgba(255, 255, 255, 0.14);
  --hero-glow: rgba(143, 165, 255, 0.5);
  --hero-wash: radial-gradient(80% 70% at 70% 20%, rgba(43, 52, 90, 0.55), transparent 70%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}