/* Design tokens transcribed verbatim from colors.txt ("Precision Editor" system).
   Do not hand-edit color/type/spacing values here without updating colors.txt first. */

:root {
  /* Colors */
  --color-surface: #fff8f7;
  --color-surface-dim: #f1d3d6;
  --color-surface-bright: #fff8f7;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fff0f1;
  --color-surface-container: #ffe9ea;
  --color-surface-container-high: #ffe1e4;
  --color-surface-container-highest: #fadbde;
  --color-on-surface: #28171a;
  --color-on-surface-variant: #5b3f43;
  --color-inverse-surface: #3e2b2e;
  --color-inverse-on-surface: #ffecee;
  --color-outline: #8f6f73;
  --color-outline-variant: #e4bdc2;
  --color-surface-tint: #bc004b;
  --color-primary: #b80049;
  --color-on-primary: #ffffff;
  --color-primary-container: #e2165f;
  --color-on-primary-container: #fffbff;
  --color-inverse-primary: #ffb2be;
  --color-secondary: #4648d4;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #6063ee;
  --color-on-secondary-container: #fffbff;
  --color-tertiary: #006a34;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #008644;
  --color-on-tertiary-container: #f6fff3;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #ffd9de;
  --color-primary-fixed-dim: #ffb2be;
  --color-on-primary-fixed: #400014;
  --color-on-primary-fixed-variant: #900038;
  --color-secondary-fixed: #e1e0ff;
  --color-secondary-fixed-dim: #c0c1ff;
  --color-on-secondary-fixed: #07006c;
  --color-on-secondary-fixed-variant: #2f2ebe;
  --color-tertiary-fixed: #89faa8;
  --color-tertiary-fixed-dim: #6ddd8e;
  --color-on-tertiary-fixed: #00210c;
  --color-on-tertiary-fixed-variant: #005227;
  --color-background: #fff8f7;
  --color-on-background: #28171a;
  --color-surface-variant: #fadbde;

  /* Typography */
  --font-family: "Hanken Grotesk", sans-serif;

  /* Shape */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Spacing (4px baseline) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --header-height: 3.5rem;
  --container-max: 1280px;
  --gutter: 1.5rem;

  /* Elevation */
  --shadow-level2: 0px 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-level3: 0px 12px 24px rgba(0, 0, 0, 0.1);
}

/* Typography scale */
.text-display-lg {
  font: 700 48px/56px var(--font-family);
  letter-spacing: -0.02em;
}
.text-headline-md {
  font: 600 24px/32px var(--font-family);
}
.text-headline-sm {
  font: 600 20px/28px var(--font-family);
}
.text-body-lg {
  font: 400 18px/28px var(--font-family);
}
.text-body-md {
  font: 400 16px/24px var(--font-family);
}
.text-body-sm {
  font: 400 14px/20px var(--font-family);
}
.text-label-md {
  font: 600 14px/16px var(--font-family);
  letter-spacing: 0.01em;
}
.text-label-sm {
  font: 500 12px/16px var(--font-family);
}

@media (max-width: 640px) {
  .text-display-lg {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
  }
}