/* Copied verbatim from _Pakima Design System/tokens/ (colors, typography, spacing, motion) on 10/11/2026.
   Do not edit here: change the design system, then copy again. Fonts load from the <link> in each page. */

/* ===== colors.css ===== */
/* Pakima color system — primary maroon #7A1232 (locked, from brand), gold from the logo gown */
:root {
  /* Maroon (brand) scale */
  --maroon-50:  #FCF1F3;
  --maroon-100: #F7DEE4;
  --maroon-200: #EFBECB;
  --maroon-300: #E093A8;
  --maroon-400: #C55C7C;
  --maroon-500: #A63256;
  --maroon-600: #8E1F41;
  --maroon-700: #7A1232; /* PRIMARY — logo maroon, verbatim */
  --maroon-800: #600B27;
  --maroon-900: #48071D;
  --maroon-950: #330413;

  /* Honey gold (from the graduate gown in the logo, #D7B46A) */
  --gold-100: #F8EED9;
  --gold-200: #F0E0B8;
  --gold-300: #E5CD91;
  --gold-400: #D7B46A; /* logo gown */
  --gold-500: #C79C47;
  --gold-600: #A87E2F;
  --gold-700: #86621F;

  /* Marker — highlighter for text sweeps only, never surfaces */
  --marker: #FFE07A;
  --marker-soft: #FFF0BE;

  /* Warm neutrals (maroon-tinted, never pure gray) */
  --canvas: #FBF3EF;   /* page background — blush cream */
  --paper:  #FFFDFB;   /* long-form reading surface */
  --card:   #FFFFFF;
  --line:        #F0DFDA;
  --line-strong: #E3CCC5;
  --ink:       #33161F; /* body text — deep maroon-black */
  --ink-soft:  #6B4A52;
  --ink-faint: #8A6570;
  --cream-text: #FBF3EF; /* text on maroon */

  /* Semantic — trust green: the CONVERSION color (all buy-CTAs) + checks/wins. "No" states reuse maroon. */
  --yes-400: #43B172;
  --yes-500: #2E9D5C;
  --yes-600: #27884E;
  --yes-700: #1F7A45;
  --yes-100: #E4F5EA;

  /* Liquid-glass surfaces (for the maroon-dominant canvas) */
  --glass-bg: rgba(255, 250, 246, 0.09);
  --glass-bg-strong: rgba(255, 250, 246, 0.14);
  --glass-border: rgba(255, 248, 243, 0.24);
  --paper-bg: rgba(255, 253, 251, 0.97);

  /* Aliases */
  --brand: var(--maroon-700);
  --brand-strong: var(--maroon-800);
  --accent: var(--gold-400);
  --surface-page: var(--maroon-950); /* the page IS maroon — cream lives on paper panels */
  --surface-card: var(--card);
  --surface-dim: var(--maroon-50);
  --surface-invert: var(--maroon-950);
  --text-body: var(--ink);
  --text-muted: var(--ink-soft);
  --text-oncolor: var(--cream-text);
  --cta-bg: var(--yes-500);
  --cta-text: #FFFFFF;
  --focus-ring: var(--gold-500);
}

/* ===== typography.css ===== */
/* Pakima type system
   Display: Baloo 2 — chunky, rounded, echoes the logo letterforms
   Body:    Lexend — engineered for reading fluency; carries the long-form letter
   Hand:    Dancing Script — elegant script for margin notes & founder voice (echoes the TTG signature) */
:root {
  --font-display: "Baloo 2", "Quicksand", system-ui, sans-serif;
  --font-body: "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
  --font-hand: "Dancing Script", "Baloo 2", cursive;

  /* Scale — long-form first: body is large, headings are loud */
  --text-xs: 13px;
  --text-sm: 15.5px;
  --text-base: clamp(17px, calc(1.05vw + 1.549px), 19px); /* letter body */
  --text-lead: clamp(20px, 2vw, 23px);
  --text-h4: 24px;
  --text-h3: clamp(23px, 2.4vw, 30px);
  --text-h2: clamp(28px, 3.4vw, 40px);
  --text-h1: clamp(36px, 4.6vw, 54px);
  --text-display: clamp(44px, 6vw, 72px);

  --leading-body: 1.75;   /* generous — reading comfort is the product */
  --leading-tight: 1.12;
  --leading-heading: 1.18;

  --tracking-display: -0.015em;
  --tracking-kicker: 0.12em;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-display: 800;

  --measure: 42rem; /* ~62ch at 19px Lexend — the reading column */
}

/* ===== spacing.css ===== */
/* Pakima spacing, radius, borders, shadows — soft die-cut “sticker sheet” surfaces */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-gap: clamp(72px, 9vw, 128px);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --border-w: 2px;

  /* Sticker shadow: a die-cut edge + soft maroon ambient, never gray */
  --shadow-sticker: 0 2px 0 var(--line), 0 16px 34px -22px rgba(122, 18, 50, 0.30);
  --shadow-float: 0 24px 48px -24px rgba(20, 2, 8, 0.55);
  --shadow-cta: 0 6px 0 var(--yes-700);
  --shadow-cta-gold: 0 6px 0 var(--gold-600);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.07), 0 24px 60px -24px rgba(15, 1, 6, 0.65);
}

/* ===== motion.css (tokens + reduced motion only) ===== */
/* Pakima motion system — expressive, springy, loop-friendly.
   Rules: never linear on visible UI; loops stay subtle (≤6deg, ≤8px travel);
   one attention device animating per viewport moment. */
:root {
  --ease-spring: cubic-bezier(0.19, 1, 0.22, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --t-quick: 160ms; /* @kind other */
  --t-move: 320ms; /* @kind other */
  --t-reveal: 650ms; /* @kind other */
  --loop-bob: 2.8s; /* @kind other */
  --loop-breath: 3.4s; /* @kind other */
  --loop-march: 1.15s; /* @kind other */
  --loop-wave: 1.8s; /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pk-reveal { opacity: 1; transform: none; }
}