/* GENERATED from DESIGN_SYSTEM.md by web/tools/build-tokens.mjs. Do not edit by hand. */
:root {
  /* Color */
  --color-surface-base: #FAF8F3;
  --color-surface-elevated: #FDFCF9;
  --color-surface-recessed: #F1EEE6;
  --color-text-primary: #141412;
  --color-text-secondary: rgb(20 20 18 / 0.60);
  --color-text-tertiary: rgb(20 20 18 / 0.68);
  --color-on-inverse: #F7F5EF;
  --color-accent-emotion: #FF4D3D;
  --color-semantic-success: #3E6B4F;
  --color-semantic-danger: #A83A2B;

  /* Type faces (fallbacks are the web's own; DESIGN_SYSTEM.md names the faces) */
  --font-serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Epilogue", "Epilogue Fallback", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  /* Type roles */
  --type-hero-family: var(--font-serif);
  --type-hero-size: 40px;
  --type-hero-weight: 700;
  --type-title-family: var(--font-serif);
  --type-title-size: 30px;
  --type-title-weight: 600;
  --type-tab-title-family: var(--font-system);
  --type-tab-title-weight: 700;
  --type-section-family: var(--font-serif);
  --type-section-size: 22px;
  --type-section-weight: 600;
  --type-prompt-family: var(--font-serif);
  --type-prompt-size: 24px;
  --type-prompt-weight: 500;
  --type-body-family: var(--font-sans);
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-subhead-family: var(--font-sans);
  --type-subhead-size: 15px;
  --type-subhead-weight: 400;
  --type-caption-family: var(--font-sans);
  --type-caption-size: 13px;
  --type-caption-weight: 400;
  --type-mono-family: var(--font-mono);
  --type-mono-size: 11px;
  --type-mono-weight: 500;
  --type-mono-tracking: 0.145em;

  /* Space (4pt base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-page: 20px;

  /* Shape and elevation */
  --radius-input: 14px;
  --radius-card: 20px;
  --radius-chip: 999px;
  --shadow-rest: 0 2px 16px rgb(20 20 18 / 0.06), 0 1px 1px rgb(20 20 18 / 0.08);
  --shadow-raised: 0 6px 32px rgb(20 20 18 / 0.08), 0 1px 1px rgb(20 20 18 / 0.08);
  --shadow-floating: 0 12px 56px rgb(20 20 18 / 0.12), 0 1px 1px rgb(20 20 18 / 0.08);

  /* Motion (spring durations; the site eases with --motion-ease) */
  --motion-tap: 200ms;
  --motion-snap: 300ms;
  --motion-settle: 340ms;
  --motion-reveal: 500ms;
  --motion-stage: 550ms;
  --motion-celebrate: 550ms;
  --motion-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
}