/* Layer 1 palette -> layer 2 semantic -> layer 3 component. Hex values live ONLY in this file. */
:root {
  /* 1. palette */
  --c-white: #FFFFFF;
  --c-mist: #F2F5F4;
  --c-blush: #FBEAF2;
  --c-blush-2: #F7DCEA;
  --c-blush-3: #F3D3E3;
  --c-ink: #1E2B2A;
  --c-ink-2: #4E5D5B;
  --c-line: #C9D3D1;
  --c-magenta: #E4007B;
  --c-magenta-deep: #C8006C;
  --c-magenta-darker: #A80058;
  --c-teal: #00A69C;
  --c-teal-deep: #00756E;
  --c-herb: #0D8F46;
  --c-red: #BC3939;
  --c-red-deep: #A82E2E;
  --c-footer-text: #D5DEDC;

  /* 2. semantic */
  --bg: var(--c-white);
  --bg-alt: var(--c-mist);
  --stage: var(--c-blush);
  --stage-pasoleq: var(--c-blush-2);
  --stage-watroba: var(--c-blush-3);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --text-inverse: var(--c-white);
  --text-inverse-muted: var(--c-footer-text);
  --surface-inverse: var(--c-ink);
  --border: var(--c-line);
  --border-strong: var(--c-ink-2);
  --action: var(--c-magenta-deep);
  --action-hover: var(--c-magenta-darker);
  --action-decor: var(--c-magenta);
  --link: var(--c-teal-deep);
  --accent-natural: var(--c-herb);
  --accent-teal: var(--c-teal);
  --focus: var(--c-magenta-deep);
  --error: var(--c-red-deep);
  --shadow-color: color-mix(in srgb, var(--c-ink) 18%, transparent);
  --overlay: color-mix(in srgb, var(--c-ink) 40%, transparent);

  /* type */
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2.6rem, 5.2vw, 4.6rem);
  --fs-h2: clamp(2rem, 3.4vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* radii */
  --r-btn: 999px;
  --r-field: 12px;
  --r-card: 28px;
  --r-pop: 20px;
  --r-chip: 999px;

  /* layout */
  --container: 1240px;
  --gutter: 24px;
  --section-y: 120px;
  --header-h: 88px;
  --header-h-small: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* 3. component */
  --btn-bg: var(--action);
  --btn-bg-hover: var(--action-hover);
  --btn-text: var(--text-inverse);
  --btn-focus: var(--focus);
  --field-bg: var(--bg);
  --field-border: var(--border-strong);
  --field-text: var(--text);
  --chip-bg: var(--bg-alt);
  --chip-text: var(--text);
  --chip-active-bg: var(--text);
  --chip-active-text: var(--text-inverse);
  --pill-bg: var(--c-white);
  --pill-text: var(--text);
  --card-bg: var(--bg);
  --panel-bg: var(--c-white);
  --tab-bg: color-mix(in srgb, var(--c-ink) 7%, var(--bg-alt));
  --tab-bg-hover: color-mix(in srgb, var(--c-ink) 11%, var(--bg-alt));
  --header-bg: var(--c-white);
  --header-shadow: 0 6px 24px var(--shadow-color);
  --pop-shadow: 0 12px 40px var(--shadow-color);
  --bar-extract: var(--action);
  --bar-mineral: var(--accent-natural);
  --bar-track: var(--bg-alt);
  --footer-bg: var(--surface-inverse);
  --footer-text: var(--text-inverse-muted);
  --footer-heading: var(--text-inverse);
}
@media (max-width: 480px) { :root { --gutter: 16px; } }
@media (max-width: 900px) { :root { --section-y: 72px; --header-h: 60px; --header-h-small: 56px; } }