/* Mint Frame — design tokens (direction A: Mint on Ink)
   Import this file first. Do not redefine these values elsewhere. */

/* Fonts: load in <head> before this stylesheet.
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"> */

:root {
  color-scheme: dark;

  /* Color — the whole palette. Nothing else is allowed. */
  --ink:    #0E1012;   /* page ground */
  --slate:  #16191D;   /* raised surfaces: cards, form, pricing */
  --line:   #262B31;   /* borders and dividers */
  --line-strong: #3A414A; /* secondary button border, input border */
  --bone:   #F3F4F1;   /* primary text, headlines, logo strokes */
  --muted:  #A5ADB4;   /* secondary text; passes 4.5:1 on ink and slate */
  --mint:   #4FE3B0;   /* the one accent: primary buttons, focus ring, logo dot, links */
  --mint-hover: #6FEBC0;
  --sage:   #8FB3A4;   /* quiet secondary for small icons only; never for text */
  --on-mint: #0E1012;  /* text on mint */
  --error:  #FF8A80;   /* form validation text; passes on slate */

  /* Type */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.8125rem;              /* 13px captions, legal */
  --text-sm: 0.9375rem;              /* 15px small body */
  --text-md: 1.0625rem;              /* 17px body */
  --text-lg: 1.25rem;                /* 20px lead paragraphs, subhead */
  --text-xl: clamp(1.5rem, 2.6vw, 2rem);      /* H3, pricing amounts */
  --text-2xl: clamp(2rem, 4vw, 2.75rem);      /* H2 */
  --text-3xl: clamp(2.5rem, 6.5vw, 4.5rem);   /* H1 */

  --leading-tight: 1.02;   /* H1 */
  --leading-snug: 1.15;    /* H2, H3 */
  --leading-body: 1.6;

  --tracking-display: -0.03em;  /* H1, H2, wordmark */
  --tracking-tight: -0.02em;    /* H3, buttons */

  /* Layout */
  --container: 1120px;
  --gutter: 24px;
  --measure: 62ch;             /* max line length for body text */
  --section-y: clamp(64px, 10vw, 112px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape */
  --radius-sm: 8px;     /* inputs, small chips */
  --radius-md: 12px;    /* cards, video tiles */
  --radius-lg: 16px;    /* pricing tier, form panel */
  --radius-pill: 999px; /* buttons */

  /* Elevation — none. Surfaces are separated by color and a 1px line, never a shadow. */
  --border: 1px solid var(--line);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 150ms;

  /* Focus */
  --focus: 0 0 0 3px var(--ink), 0 0 0 5px var(--mint);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}

/* Base — apply in styles.css after importing this file:
   body { background: var(--ink); color: var(--bone); font: var(--text-md)/var(--leading-body) var(--font-body); }
   h1,h2,h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); }
   a { color: var(--mint); } a:hover { color: var(--mint-hover); }
   :focus-visible { outline: none; box-shadow: var(--focus); } */