/* I Can Master AI · shared foundations. All page types consume these tokens. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
:root {
  color-scheme: light;
  --font-display: "Space Grotesk", "Arial", sans-serif;
  --font-body: "DM Sans", "Arial", sans-serif;
  --font-label: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --color-canvas: #f5f4ee;
  --color-surface: #fffefb;
  --color-subtle: #e9ece2;
  --color-ink: #22271f;
  --color-text: #30382b;
  --color-muted: #56604e;
  --color-border: #d3d8cb;
  --color-border-strong: #7a866b;
  --color-accent: #d7ef79;
  --color-accent-hover: #e1f496;
  --color-accent-ink: #536a2f;
  --color-on-dark: #f5f6ed;
  --color-muted-on-dark: #c6cdbb;
  --color-lavender: #e0daee;
  --color-peach: #f0ddc9;
  --color-blue: #d7e3e9;
  --color-focus: #526b2b;

  --type-caption: .75rem;   /* 12 px: supporting labels, never purchase details */
  --type-small: .875rem;    /* 14 px */
  --type-body: 1rem;        /* 16 px */
  --type-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --type-h3: clamp(1.375rem, 1.15rem + .65vw, 1.75rem);
  --type-h2: clamp(2rem, 1.35rem + 2.1vw, 3.25rem);
  --type-h1: clamp(2.5rem, 1.5rem + 3.2vw, 4.75rem);
  --type-display: clamp(2.5rem, 1.1rem + 4vw, 4.75rem);
  --type-price: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);
  --leading-body: 1.65;
  --leading-heading: 1.08;
  --tracking-heading: -.055em;
  --tracking-label: .085em;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4rem, 2.5rem + 4vw, 7rem);
  --space-layout: clamp(2rem, 1rem + 3vw, 5rem);
  --space-card: clamp(1.5rem, 1.2rem + .8vw, 2rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-width: 78rem;
  --reading-width: 48rem;

  --radius-sm: .5rem;
  --radius-md: .875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 99rem;
  --shadow-card: 0 12px 32px -20px #202a1829;
  --shadow-preview: 0 24px 55px -32px #24301b52;
  --control-height: 3rem;
  --target-size: 2.75rem;
  --transition-fast: 160ms ease;
  --motion-reveal-duration: 650ms;
  --motion-dance-duration: 1400ms;
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
}