/*
 * Treehouse design tokens (SkyBuds).
 * Generated by scripts/build.ts from tokens.json — DO NOT EDIT BY HAND.
 * Regenerate with: node scripts/build.ts (from packages/design-tokens).
 *
 * Roles: Ember = action, Sky = selection, Leaf = success, Star = celebration only.
 */

:root {
  /* Color — light (default) */
  --th-color-paper: #FFFFFF;
  --th-color-ink: #2A2C45;
  --th-color-ink-soft: #5C5F7A;
  --th-color-ink-faint: #8A8DA6;
  --th-color-line: #E7E8EF;
  --th-color-cream: #FFF6EF;
  --th-color-cobalt: #3276CE;
  --th-color-butter: #FFDE80;
  --th-color-ember: #F4633C;
  --th-color-ember-pressed: #D14E2B;
  --th-color-ember-wash: #FDEFEA;
  --th-color-sky: #6FB5DE;
  --th-color-sky-wash: #EBF5FB;
  --th-color-leaf: #4FB56A;
  --th-color-leaf-wash: #EAF6EE;
  --th-color-star: #F5C043;
  --th-color-danger: #C43B3B;
  --th-color-warning: #C98A2E;

  /* Spacing */
  --th-space-xs: 4px;
  --th-space-sm: 8px;
  --th-space-md: 12px;
  --th-space-lg: 16px;
  --th-space-xl: 20px;
  --th-space-xxl: 24px;
  --th-space-xxxl: 32px;
  --th-space-screen-margin-h: var(--th-space-xl);

  /* Radius */
  --th-radius-sm: 8px;
  --th-radius-md: 12px;
  --th-radius-lg: 16px;
  --th-radius-xl: 20px;
  --th-radius-pill: 999px;

  /* Typography */
  --th-font-size-display: 34px;
  --th-font-size-title: 24px;
  --th-font-size-heading: 20px;
  --th-font-size-subheading: 18px;
  --th-font-size-body: 16px;
  --th-font-size-caption: 14px;
  --th-font-display: "Baloo 2", "Nunito", ui-rounded, sans-serif;
  --th-font-body: "Nunito", system-ui, sans-serif;

  /* Components (colors reference palette vars, so dark mode flows through) */
  --th-cloud-library-sky-top: #65ADEA;
  --th-cloud-library-sky-bottom: #BCE7FA;
  --th-cloud-library-cloud-shade: #DAEAF4;
  --th-cloud-library-parent-sky: #EAF6FD;
  --th-cloud-library-parent-paper: #F7FAFC;
  --th-cloud-library-art-height: 84px;
  --th-cloud-library-card-height: 210px;
  --th-cloud-library-minimum-card-width: 160px;
  --th-cloud-library-float-distance: 3px;
  --th-home-wordmark-width: 148px;
  --th-home-wordmark-height: 50px;
  --th-home-skybud-choice-size: 44px;
  --th-home-skybud-list-height: 168px;
  --th-button-height: 62px;
  --th-button-radius: var(--th-radius-pill);
  --th-button-fill: var(--th-color-ember);
  --th-button-pressed-fill: var(--th-color-ember-pressed);
  --th-button-lip-color: var(--th-color-ember-pressed);
  --th-button-lip-offset-y: 3px;
  --th-button-lip-press-travel: 3px;
  --th-input-height: 56px;
  --th-input-radius: var(--th-radius-lg);
  --th-input-border: var(--th-color-line);
  --th-input-fill: var(--th-color-paper);
  --th-progress-bar-fill: var(--th-color-ember);
  --th-progress-bar-track: var(--th-color-line);
  --th-progress-bar-radius: var(--th-radius-pill);
  --th-progress-bar-shine-color: #FFFFFF;
  --th-progress-bar-shine-opacity: 0.25;
  --th-choice-card-fill: var(--th-color-paper);
  --th-choice-card-border: var(--th-color-line);
  --th-choice-card-border-width: 1px;
  --th-choice-card-radius: var(--th-radius-lg);
  --th-choice-card-selected-fill: var(--th-color-sky-wash);
  --th-choice-card-selected-border: var(--th-color-sky);
  --th-choice-card-selected-border-width: 2px;
  --th-onboarding-font-regular: SoraSB400;
  --th-onboarding-font-semibold: SoraSB600;
  --th-onboarding-font-bold: SoraSB700;
  --th-onboarding-font-heavy: SoraSB800;
  --th-onboarding-margin: var(--th-space-xxl);
  --th-onboarding-card-radius: var(--th-radius-xl);
  --th-onboarding-title-size: 28px;
  --th-onboarding-body-size: 14px;
  --th-onboarding-caption-size: 12px;
  --th-onboarding-hero-size: 142px;
  --th-onboarding-button-height: 56px;
  --th-onboarding-choice-height: 68px;
  --th-onboarding-chat-portrait-size: 94px;
  --th-onboarding-chat-title-size: 21px;
  --th-onboarding-chat-compact-title-size: 18px;
  --th-onboarding-chat-bubble-radius: 22px;
  --th-onboarding-static-spacing: 18px;
  --th-onboarding-compact-choice-height: 64px;
  --th-onboarding-interest-icon-size: 36px;
  --th-onboarding-lock-height: 200px;
  --th-onboarding-offer-hero-height: 138px;
}

/*
 * DARK — DRAFT. First-pass palette, not yet design-reviewed.
 * Only color changes between themes; spacing/radius/type are invariant.
 */
[data-theme="dark"] {
  --th-color-paper: #17182A;
  --th-color-ink: #ECEDF5;
  --th-color-ink-soft: #B4B7CE;
  --th-color-ink-faint: #7E819C;
  --th-color-line: #33354F;
  --th-color-cream: #1E2033;
  --th-color-ember: #F97F58;
  --th-color-ember-pressed: #DE6743;
  --th-color-ember-wash: #33221D;
  --th-color-sky: #6FB5DE;
  --th-color-sky-wash: #1C2A3A;
  --th-color-leaf: #5CBE76;
  --th-color-leaf-wash: #1B2F26;
  --th-color-star: #F5C043;
  --th-color-danger: #E06C6C;
  --th-color-warning: #E0A24E;
}