/* Marigold Hair & Nail Studio: public design tokens (spec 900 stage A, home loop 1).
   Every color, size, space, radius, shadow, scrim and motion value used by site.css lives here.

   Contrast pairs (WCAG 2.2 AA, measured):
   ink #2B2226 on cream #FAF6F1 = 14.4:1      plum #7A3E5A on cream = 7.3:1
   white on plum = 7.9:1                       muted #5E5357 on cream = 6.85:1
   plum-dark #5C2D43 focus on cream = 10.2:1, on white = 11.0:1
   line-strong #8C7B70 on white = 4.05:1 (input borders, 1.4.11)
   sage-text #4F6A5A on white = 5.93:1         marigold-text #9A6A12 on white = 4.73:1
   on-dark-muted #CDBFC5 on ink = 8.72:1
   Sage and marigold proper are decorative only: never text, never a meaningful icon. */
:root {
  /* Brand (000 §7). */
  --cream: #FAF6F1;
  --cream-2: #F3ECE3;
  --surface: #FFFFFF;
  --ink: #2B2226;
  --plum: #7A3E5A;
  --sage: #6F8A7A;
  --marigold: #C98A1B;

  /* Derived. */
  --plum-dark: #5C2D43;
  --plum-tint: #F4EAEF;
  --sage-tint: #E9EFEB;
  --sage-ink: #33463B;
  --marigold-tint: #F7E7C6;
  --muted: #5E5357;
  --line: #E6DCD1;            /* decorative dividers only */
  --line-strong: #8C7B70;     /* control borders */
  --sage-text: #4F6A5A;
  --marigold-text: #9A6A12;
  --placeholder: var(--cream-2);

  /* On dark surfaces (plum, plum-dark, ink, hero scrim). */
  --on-dark: #FFFFFF;
  --on-dark-soft: #F3E9ED;
  --on-dark-muted: #CDBFC5;
  --plum-on-dark: #F2C9DA;
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-hover: rgba(255, 255, 255, .14);

  /* Status. */
  --ok: #2F6B45;
  --ok-bg: #E7F2EA;
  --ok-line: #BFDCC8;
  --err: #9B2C2C;
  --err-bg: #FBE9E9;
  --err-line: #EBC1C1;
  --closure-bg: #FBE9E9;
  --closure-fg: #7A1F1F;
  --warn-bg: #FBF0DA;
  --warn-fg: #6B4A0E;
  --promo-bg: #E9EFEB;
  --promo-fg: #2E4337;
  /* Status dots are decorative: the text beside them always carries the meaning. */
  --dot-closed: #B9C9BF;
  --dot-open: #8FD3A6;
  --dot-soon: #F2C46B;

  /* Type: 1.25 scale, body 17px. */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-2xs: .625rem;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.08rem + .25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --text-hero: clamp(2.75rem, 1.5rem + 5.2vw, 5rem);
  --leading-body: 1.65;
  --leading-heading: 1.12;

  /* Spacing: 4px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --gutter: var(--space-4);
  --max: 1160px;
  --header-h: 72px;
  --section-y: var(--space-16);
  --offscreen: -10000px;

  /* Component sizes. */
  --tap: 44px; --tap-min: 24px;
  --btn-h: 48px;
  --btn-h-sm: 40px;
  --input-h: 50px;
  --textarea-h: 130px;
  --brand-mark: 40px;
  --brand-mark-sm: 34px;
  --icon-bars: 18px;
  --icon-bars-gap: 6px;
  --row-h: 56px;
  --chip-sm-h: 36px;
  --step-dot: 28px;
  --dot: 8px;
  --bullet: 14px;
  --control: 20px;
  --border-control: 1.5px;
  --hero-min: min(92svh, 820px);
  --hero-min-sm: 560px;
  --error-min-h: 60vh;

  /* Radii. */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-pill: 999px;

  /* Shadows. */
  --shadow-1: 0 1px 2px rgba(43, 34, 38, .05), 0 8px 24px rgba(43, 34, 38, .06);
  --shadow-2: 0 2px 4px rgba(43, 34, 38, .06), 0 16px 40px rgba(43, 34, 38, .12);
  --shadow: var(--shadow-1);
  --shadow-handle: 0 0 0 1px rgba(0, 0, 0, .2);

  /* Focus: one style. Plum-dark on light surfaces, white on dark ones. */
  --focus-on-light: var(--plum-dark);
  --focus-on-dark: var(--on-dark);
  --focus: var(--focus-on-light);
  --focus-width: 3px;
  --focus-offset: 3px;

  /* Scrims: text on photos sits over .70 or more. */
  --scrim-hero: linear-gradient(180deg, rgba(43, 22, 32, .15) 0%, rgba(43, 22, 32, .70) 45%, rgba(43, 22, 32, .85) 100%);
  --scrim-hero-sm: linear-gradient(180deg, rgba(43, 22, 32, .15) 0%, rgba(43, 22, 32, .70) 25%, rgba(43, 22, 32, .85) 100%);
  --scrim-modal: rgba(20, 12, 16, .92);
  --cta-bg: radial-gradient(120% 140% at 0% 0%, var(--plum) 0%, var(--plum-dark) 100%);

  /* Motion. */
  --dur: 200ms;
  --dur-slow: 350ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 640px) { :root { --gutter: var(--space-6); } }
@media (min-width: 900px) { :root { --section-y: var(--space-24); } }