/* ============================================================
   Elome — Semantic aliases & resolved-length tokens
   ------------------------------------------------------------
   Friendly shorthands on top of the raw Figma variables, plus
   px-resolved length tokens (the Figma float tokens are unitless,
   so we multiply by 1px once here for ergonomic use everywhere).
   ============================================================ */
:root {
  /* ---- Brand peach scale ---- */
  --peach-100: var(--color-brand-colors-brand-colors-brand-peach-fuzz-100);  /* near-white warm */
  --peach-200: var(--color-brand-colors-brand-colors-brand-peach-fuzz-200);
  --peach-300: var(--color-brand-colors-brand-colors-brand-peach-fuzz-300);
  --peach-default: var(--color-brand-colors-brand-colors-brand-peach-fuzz-default); /* 255,230,209 */
  --peach-500: var(--color-brand-colors-brand-colors-brand-peach-fuzz-500);  /* 255,204,162 */
  --peach-900: var(--color-brand-colors-brand-colors-brand-peach-fuzz-900);  /* 249,165,129 — the signature coral-peach */

  /* ---- Earth / neutral warm ---- */
  --earth-200: var(--color-earth-200);
  --earth-300: var(--color-earth-300);
  --earth-default: var(--color-earth-default);
  --earth-700: var(--color-earth-700);
  --earth-900: var(--color-earth-900);

  /* ---- Accent families ---- */
  --green-keen: var(--color-brand-colors-brand-colors-green-peachy-keen-default);
  --green-keen-700: var(--color-brand-colors-brand-colors-green-peachy-keen-700);
  --purple-peach: var(--color-brand-colors-brand-colors-purple-purple-peach-default);
  --red-grilled: var(--color-brand-colors-brand-colors-red-grilled-peach-default);
  --yellow-cream: var(--color-brand-colors-brand-colors-yellow-peaches-n-cream-default);

  /* ---- Ink / text ---- */
  --ink: var(--color-dark-default);          /* 71,68,72 — the warm near-black */
  --ink-300: var(--color-dark-300);
  --ink-200: var(--color-dark-200);
  --ink-100: var(--color-dark-100);

  /* ---- Surfaces ---- */
  --surface-page: var(--color-page-primary);
  --surface-page-warm: var(--color-page-secondary);
  --surface-card: var(--color-white-default);
  --surface-box: var(--color-box-primary);

  /* ---- Strokes ---- */
  --stroke-default: var(--color-stroke-primary);
  --stroke-strong: var(--color-stroke-secondary);

  /* ---- Text semantic ---- */
  --text-body: var(--color-text-body-primary);
  --text-muted: var(--color-text-body-secondary);
  --text-on-dark: var(--color-text-body-tertiary);
  --text-heading: var(--color-text-heading-primary);
  --text-promo: var(--color-text-body-promo);

  /* ---- Resolved length tokens (px) ---- */
  --size-h1: calc(var(--font-size-5xl) * 1px);   /* 62 */
  --size-h2: calc(var(--font-size-4xl) * 1px);   /* 48 */
  --size-h3: calc(var(--font-size-3xl) * 1px);   /* 40 */
  --size-h4: calc(var(--font-size-xl) * 1px);    /* 25 */
  --size-lg: calc(var(--font-size-lg) * 1px);    /* 20 */
  --size-base: calc(var(--font-size-base) * 1px);/* 14 */
  --size-sm: calc(var(--font-size-sm) * 1px);    /* 13 */
  --size-xs: calc(var(--font-size-xs) * 1px);    /* 11 */

  --lh-h1: calc(var(--font-line-height-5xl) * 1px);
  --lh-h2: calc(var(--font-line-height-4xl) * 1px);
  --lh-h3: calc(var(--font-line-height-3xl) * 1px);
  --lh-base: calc(var(--font-line-height-base) * 1px);

  /* ---- Resolved radii (px) ---- */
  --r-xs: calc(var(--rounded-xs-2) * 1px);   /* 8 */
  --r-sm: calc(var(--rounded-sm-2) * 1px);   /* 12 */
  --r-md: calc(var(--rounded-md-2) * 1px);   /* 16 */
  --r-lg: calc(var(--rounded-lg-2) * 1px);   /* 20 */
  --r-xl: calc(var(--rounded-xl-2) * 1px);   /* 24 */
  --r-2xl: calc(var(--rounded-2xl-2) * 1px); /* 32 */
  --r-pill: 999px;

  /* ---- Resolved spacing (px) ---- */
  --sp-1: calc(var(--spacing-1) * 1px);  /* 4 */
  --sp-2: calc(var(--spacing-2) * 1px);  /* 8 */
  --sp-3: calc(var(--spacing-3) * 1px);  /* 12 */
  --sp-4: calc(var(--spacing-4) * 1px);  /* 16 */
  --sp-5: calc(var(--spacing-5) * 1px);  /* 20 */
  --sp-6: calc(var(--spacing-6) * 1px);  /* 24 */
  --sp-8: calc(var(--spacing-8) * 1px);  /* 32 */
  --sp-10: calc(var(--spacing-10) * 1px);/* 40 */
  --sp-16: calc(var(--spacing-16) * 1px);/* 64 */

  /* ---- Shadow system (soft, warm, low-contrast) ---- */
  --shadow-sm: 0 1px 2px rgba(71,68,72,0.06);
  --shadow-card: 0 4px 16px rgba(71,68,72,0.08);
  --shadow-lifted: 0 12px 32px rgba(71,68,72,0.12);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
}