/*
 * Moira onboarding design tokens.
 *
 * Studio is the naming authority: the raw palette follows
 * frontend/src/styles/index.css. This standalone Django host stores complete
 * CSS colours instead of HSL channels because it does not have Tailwind to
 * wrap those channels in hsl(). The warm cream and brown values used by the
 * public website remain exact where onboarding already relies on their
 * measured contrast.
 *
 * Component styles consume the semantic layer below, never the raw palette.
 * That lets onboarding stay visually close to moiraclub.com while sharing a
 * vocabulary with Studio.
 */

:root {
  /* Studio raw palette: primary / burgundy. */
  --brand-primary-100: #1a0005;
  --brand-primary-200: #290008;
  --brand-primary-300: #36020c;
  --brand-primary-400: #440410;
  --brand-primary-500: #550716;
  --brand-primary-600: #812839;
  --brand-primary-700: #b04f62;
  --brand-primary-800: #d48c9b;
  --brand-primary-900: #ffe0e7;

  /* Studio raw palette: secondary / olive. */
  --brand-secondary-100: #1f2112;
  --brand-secondary-200: #2e301c;
  --brand-secondary-300: #373922;
  --brand-secondary-400: #404229;
  --brand-secondary-500: #4e5233;
  --brand-secondary-600: #787c57;
  --brand-secondary-700: #a1a484;
  --brand-secondary-800: #d8dac8;
  --brand-secondary-900: #fefffa;

  /* Studio raw palette: tertiary / website browns and creams. */
  --brand-tertiary-100: #443322;
  --brand-tertiary-200: #5a4433;
  --brand-tertiary-300: #7a5e45;
  --brand-tertiary-400: #a4845f;
  --brand-tertiary-500: #d1ad89;
  --brand-tertiary-600: #dccaa8;
  --brand-tertiary-700: #e8d9bc;
  --brand-tertiary-800: #f2e7d1;
  --brand-tertiary-850: #f8efdf;
  --brand-tertiary-900: #faf4e8;

  /* Studio accents. Coral is a fill or state cue, never readable text. */
  --accent-coral-400: #fd9a81;
  --accent-coral-500: #fd6e4c;
  --accent-coral-600: #d44d2b;
  --accent-lime-400: #f5f896;
  --accent-lime-500: #e4e873;
  --accent-lime-600: #bdc133;

  /* Website foreground used on coral; 6.35:1 at the current values. */
  --brand-brown: #291206;

  /* Semantic colour roles. */
  --surface-page: var(--brand-tertiary-800);
  --surface-card: var(--brand-tertiary-900);
  --surface-subtle: var(--brand-tertiary-850);
  --surface-highlight: var(--brand-tertiary-700);
  --surface-feature: var(--brand-tertiary-200);
  --text-on-feature: var(--brand-tertiary-900);
  --text-on-feature-muted: var(--brand-tertiary-600);
  --pillar-focus-background: var(--brand-primary-600);
  --pillar-focus-foreground: var(--brand-tertiary-900);
  --text-primary: var(--brand-tertiary-200);
  --text-muted: var(--brand-tertiary-300);
  /* Text inside a control that is not an answer: a placeholder, or the
     MM / DD / YYYY the date field is typed into. Lighter than --text-muted on
     purpose. --text-muted is for hint copy on the page, and used in a field it
     lands 1.52:1 from the typed value -- close enough that an empty control
     reads as a filled one. This is 2.62:1 from it, which is the separation the
     palette allows while staying legible (3.17:1 on --control-background). */
  --text-placeholder: var(--brand-tertiary-400);
  --text-on-accent: var(--brand-brown);
  --text-on-action: var(--brand-tertiary-900);
  --action-primary-background: var(--brand-tertiary-200);
  --action-primary-background-hover: var(--brand-tertiary-300);
  --action-primary-foreground: var(--text-on-action);
  --action-secondary-background: transparent;
  --action-secondary-background-hover: var(--surface-subtle);
  --action-secondary-border: var(--brand-tertiary-200);
  --action-secondary-foreground: var(--text-primary);
  --action-focus-ring: var(--brand-tertiary-200);
  --control-background: var(--surface-card);
  --control-border: var(--brand-primary-600);
  --control-border-hover: var(--control-border);
  --control-border-selected: var(--control-border);
  --control-focus-ring: var(--control-border);
  --control-focus-offset: var(--surface-page);
  --selection-fill: var(--accent-coral-500);
  --selection-ring: var(--control-border);
  --divider: var(--brand-tertiary-600);
  --progress-track: var(--brand-tertiary-700);
  --progress-fill: var(--accent-coral-500);
  --feedback-error-background: var(--surface-card);
  --feedback-error-border: var(--accent-coral-500);
  --feedback-error-text: var(--text-primary);
  --feedback-success-background: var(--accent-lime-400);
  --feedback-success-border: var(--brand-secondary-600);
  --feedback-success-text: var(--brand-secondary-100);

  --surface-tier-feature: var(--brand-brown);
  --surface-tier-highlight: var(--brand-tertiary-700);
  --text-tier-feature: var(--brand-tertiary-800);
  --text-tier-feature-muted: var(--brand-tertiary-600);
  --divider-tier-feature: var(--brand-tertiary-300);

  /* Type. Fluid steps keep the hierarchy intact without breakpoint jumps. */
  --font-display: "Domine", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display-screen-small: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --font-display-screen-medium: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --font-display-screen-large: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
  --font-display-hero: clamp(2.5rem, 7vw, 4.5rem);
  --font-narrative: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --font-body-large: clamp(1.1875rem, 1.125rem + 0.3vw, 1.3125rem);
  --font-body-default: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --font-action: 1.125rem;
  --font-body-small: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --font-caption: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --line-height-display: 1.15;
  --line-height-body: 1.6;
  --line-height-action: 1.4375rem;
  --line-height-caption: 1.4;
  --letter-spacing-display: -0.01em;

  /* Space. A roomy public journey, not Studio's dense operational shell. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-space-start: clamp(2.5rem, 8vh, 6rem);
  --page-space-end: clamp(5rem, 12vh, 9rem);
  --section-space: clamp(1.75rem, 4vw, 3rem);
  --content-measure: 44rem;
  --content-measure-wide: 64rem;
  --control-min-height: 56px;
  --action-width: 15rem;
  --choice-min-height: 72px;

  /* Shape, elevation, and motion. */
  --radius-small: 0.625rem;
  --radius-control: 1rem;
  --radius-card: 1.75rem;
  --radius-pill: 999px;
  --shadow-resting: 0 1px 2px rgb(41 18 6 / 8%), 0 8px 24px rgb(41 18 6 / 4%);
  --shadow-raised: 0 18px 50px rgb(41 18 6 / 14%);
  --shadow-action-raised: 0 18px 25px rgb(41 18 6 / 14%);
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}