/* Hallmark · tokens · HeyGro "The Loop"
 * Brand-anchored custom theme. Every value below is lifted from the shipping
 * app (lib/theme.dart, Grove palette) or the live site (site/index.html) —
 * nothing invented. Do not inline raw colour values anywhere in the build;
 * reference these names.
 */

:root {
  /* ── Paper + surfaces ─────────────────────────────────────────────── */
  --color-paper:      #050505;  /* Palette.grove.bg */
  --color-paper-2:    #0A0A0B;  /* surface */
  --color-paper-3:    #111113;  /* surface2 */
  --color-ink:        #1A0533;  /* Gro's eye ink — deepest grape */

  /* ── Rules ────────────────────────────────────────────────────────── */
  --color-rule:       #27272A;
  --color-rule-2:     #3F3F46;

  /* ── Type ─────────────────────────────────────────────────────────── */
  --color-tx:         #FFFFFF;
  --color-tx-2:       #E4E4E7;
  --color-tx-3:       #94A3B8;
  --color-tx-4:       #71717A;

  /* ── Accents ──────────────────────────────────────────────────────── */
  --color-accent:     #7C4DFF;  /* grape — GroColors.bodyTop */
  --color-accent-2:   #C084FC;  /* lifted grape */
  --color-accent-dim: #5B2E9E;  /* GroColors.bodyBot */
  --color-green:      #4ADE80;  /* growth — the only "positive" signal */
  --color-green-dim:  #2FA85F;  /* GroColors.sproutDim */
  --color-cream:      #FFF6E5;  /* Palette.grove.accent — Gro's catchlights */

  /* Glow washes — derived from the accents, used only on the film stage. */
  --glow-grape:       rgba(124, 77, 255, 0.16);
  --glow-green:       rgba(74, 222, 128, 0.10);

  /* ── Fonts ────────────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale ───────────────────────────────────────────────────── */
  --text-display: clamp(2.5rem, 5.6vw, 4.5rem);
  --text-xl:      clamp(1.75rem, 3.6vw, 3rem);
  --text-lg:      clamp(1.25rem, 2.1vw, 1.6rem);
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-micro:   0.6875rem;

  /* ── Space (4pt) ──────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-mid:     280ms;
  --dur-slow:    620ms;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --measure:  62ch;
  --page-max: 1240px;
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
}