/* Tréo web tokens per design.md §12.2 — semantic tokens only in markup;
   primitives (underscore-prefixed) stay in this file.
   Shared foundation for public pages; page styles layer on top. */

:root {
  /* Primitives (§2.1) */
  --_purple-50: #FAF5FB;
  --_purple-100: #F3E8F4;
  --_purple-200: #E6D0E8;
  --_purple-300: #D4ADD8;
  --_purple-400: #A67FAF;
  --_purple-500: #7E4A81;
  --_purple-600: #653368;
  --_purple-700: #502251;
  --_purple-800: #3D1A3E;
  --_purple-900: #2E0F30;
  --_orange-50: #FFF6EB;
  --_orange-100: #FFEBD1;
  --_orange-300: #FFB454;
  --_orange-500: #FF8C00;
  --_orange-700: #9C5200;
  --_neutral-0: #FFFFFF;
  --_neutral-50: #F8F8F8;
  --_neutral-100: #F0F0F0;
  --_neutral-200: #E4E4E4;
  --_neutral-300: #D1D1D1;
  --_neutral-400: #8F8F8F;
  --_neutral-500: #757575;
  --_neutral-600: #5C5C5C;
  --_neutral-700: #424242;
  --_neutral-900: #171717;
  --_success-50: #EAF6EB;
  --_success-500: #178522;
  --_success-700: #116619;
  --_error-50: #FDECEC;
  --_error-500: #B00020;
  --_error-700: #8C0009;

  /* Semantic tokens (§2.3) */
  --treo-surface-base: var(--_neutral-0);
  --treo-surface-sunken: var(--_neutral-50);
  --treo-surface-raised: var(--_neutral-0);
  --treo-surface-inverse: var(--_neutral-900);
  --treo-surface-brand: var(--_purple-700);
  --treo-surface-brand-hover: var(--_purple-600);
  --treo-surface-brand-pressed: var(--_purple-800);
  --treo-surface-brand-subtle: var(--_purple-100);
  --treo-surface-brand-container: var(--_purple-200);
  --treo-surface-accent: var(--_orange-500);
  --treo-surface-accent-subtle: var(--_orange-50);
  --treo-surface-success-subtle: var(--_success-50);
  --treo-surface-error-subtle: var(--_error-50);
  --treo-surface-skeleton: var(--_neutral-100);
  --treo-surface-pressed: var(--_neutral-100);

  --treo-content-primary: var(--_neutral-900);
  --treo-content-secondary: var(--_neutral-600);
  --treo-content-tertiary: var(--_neutral-500);
  --treo-content-disabled: var(--_neutral-400);
  --treo-content-brand: var(--_purple-700);
  --treo-content-accent: var(--_orange-700);
  --treo-content-success: var(--_success-700);
  --treo-content-error: var(--_error-500);
  --treo-content-on-brand: var(--_neutral-0);
  --treo-content-on-brand-container: var(--_purple-900); /* deepest brand ink on light purple fields; mirrors Flutter onPrimaryContainer */
  --treo-content-on-accent: var(--_neutral-0);
  --treo-content-inverse: var(--_neutral-0);

  --treo-border-subtle: var(--_neutral-200);
  --treo-border-default: var(--_neutral-300);
  --treo-border-strong: var(--_neutral-400);
  --treo-border-brand: var(--_purple-700);
  --treo-border-focus: var(--_purple-500);
  --treo-border-focus-inverse: var(--_orange-500);

  --treo-brand-light: var(--_purple-300);

  /* Marketing-only gradient (§12.2), plus its vertical flip */
  --treo-gradient-marketing: linear-gradient(180deg, var(--_purple-700), var(--_purple-900));
  --treo-gradient-marketing-flipped: linear-gradient(0deg, var(--_purple-700), var(--_purple-900));

  /* Spacing (§4.1) */
  --treo-space-xxs: 4px;
  --treo-space-xs: 8px;
  --treo-space-s: 12px;
  --treo-space-m: 16px;
  --treo-space-l: 20px;
  --treo-space-xl: 24px;
  --treo-space-xxl: 32px;
  --treo-space-xxxl: 48px;
  --treo-space-xxxxl: 64px;

  /* Radius (§5.1) */
  --treo-radius-xs: 8px;
  --treo-radius-sm: 12px;
  --treo-radius-md: 16px;
  --treo-radius-lg: 20px;
  --treo-radius-xl: 28px;
  --treo-radius-full: 999px;

  /* Type families (§3.1) */
  --treo-font-display: "Merriweather", Georgia, "Times New Roman", serif;
  --treo-font-sans: "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion (§6.1) */
  --treo-motion-instant: 120ms;
  --treo-motion-quick: 200ms;
  --treo-motion-standard: 320ms;
  --treo-motion-deliberate: 480ms;

  /* Sanctioned shadows (§5.2) — the only two in the system */
  --treo-shadow-floating: 0 8px 24px rgba(23, 23, 23, 0.12);
  --treo-shadow-overlay: 0 -4px 32px rgba(23, 23, 23, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--treo-font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--treo-content-primary);
  background: var(--treo-surface-base);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* Type scale (§3.2) as utility classes, rem off 16px root */

.t-display-lg { font-family: var(--treo-font-display); font-weight: 800; font-size: 2.75rem; line-height: 3.25rem; }   /* 44/52 — marketing heroes only */
.t-display-md { font-family: var(--treo-font-display); font-weight: 800; font-size: 2.25rem; line-height: 2.75rem; }   /* 36/44 */
.t-display-sm { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.875rem; line-height: 2.375rem; } /* 30/38 */
.t-headline-lg { font-family: var(--treo-font-sans); font-weight: 700; font-size: 2rem; line-height: 2.5rem; font-variant-numeric: tabular-nums; } /* 32/40 — the money slot */
.t-headline-md { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.75rem; line-height: 2.25rem; }  /* 28/36 */
.t-headline-sm { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.5rem; line-height: 2rem; }      /* 24/32 */
.t-title-lg { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.75rem; }     /* 20/28 */
.t-title-md { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.0625rem; line-height: 1.5rem; }    /* 17/24 */
/* Marketing lede — one step above bodyLarge for standalone section copy. */
.t-body-xl { font-family: var(--treo-font-sans); font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; }        /* 18/28 */
.t-body-lg { font-family: var(--treo-font-sans); font-weight: 500; font-size: 1rem; line-height: 1.5rem; }             /* 16/24 */
.t-body-md { font-family: var(--treo-font-sans); font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; }        /* 14/20 */
.t-body-sm { font-family: var(--treo-font-sans); font-weight: 500; font-size: 0.75rem; line-height: 1rem; }            /* 12/16 */
.t-label-lg { font-family: var(--treo-font-sans); font-weight: 600; font-size: 0.875rem; line-height: 1rem; }          /* 14/16 */
.t-label-md { font-family: var(--treo-font-sans); font-weight: 600; font-size: 0.75rem; line-height: 1rem; }           /* 12/16 */
.t-label-sm { font-family: var(--treo-font-sans); font-weight: 700; font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; } /* 11/14 overline */

.t-tabular { font-variant-numeric: tabular-nums; }