/* ==========================================================================
   Smiles & Service — Design tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Every component reads these custom properties; no raw hex in components.

   PALETTE = owner's logo-derived PURPLE (approved, UPLAA-334).
   The bright purple→magenta→coral gradient is reserved for the LOGO MARK,
   hero flourishes, and decorative marks only. All functional text/buttons use
   AA-safe --primary (#6B4093, 7.55:1 on white) or --plum-ink (#3B2A52, 12.8:1).
   Magenta/coral fail body-text AA, so they never carry small text.
   ========================================================================== */

/* --- Self-hosted font ---------------------------------------------------- */
/* One refined humanist sans (Source Sans 3) carries the whole system — a
   single variable woff2 covering the latin range at 400–600. Display weight
   and tracking build the hierarchy; no serif, no cream-era pairing. If the
   file fails to load, the documented humanist fallback stack renders. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --- Light theme (default) --------------------------------------------- */
:root {
  --bg: #FBFAFD;
  --surface: #FFFFFF;
  --surface-sunken: #F4EEF7;
  --ink: #241A33;
  --ink-muted: #574B66;
  --primary: #6B4093;          /* brand purple — text-safe, 7.55:1 on white */
  --primary-hover: #58347A;
  --accent: #B23A7D;           /* deep magenta — AA as text (5.3:1) & btn label (5.5:1) */
  --accent-hover: #A82E72;
  --plum-ink: #3B2A52;         /* deep plum — 12.8:1 */
  --wheat: #D96391;            /* DECORATIVE brand magenta (rules/marks) — never text */
  --border: #E7DCEF;
  --focus: #6B4093;

  /* Themed button label: white on the light-theme purple/magenta fills */
  --btn-label: #FFFFFF;
  /* Perceivable meaningful border (3:1) uses muted plum, not the hairline */
  --border-strong: #574B66;
  --shadow-float: 0 6px 24px -8px rgba(36, 26, 51, 0.30);

  /* --- Brand gradient (logo / hero flourish / decorative marks ONLY) --- */
  --grad-purple: #604090;
  --grad-magenta: #B05090;
  --grad-coral: #F06090;
  --brand-gradient: linear-gradient(120deg, var(--grad-purple) 0%, var(--grad-magenta) 52%, var(--grad-coral) 100%);
  /* Text-safe display sheen — dark-purple stops only, every stop >= 5.2:1 */
  --display-gradient: linear-gradient(120deg, #58347A 0%, #6B4093 55%, #8E4FA6 100%);

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Source Sans 3", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 3.815rem);
  --fs-h1: 2.441rem;
  --fs-h2: 1.953rem;
  --fs-h3: 1.563rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-display: 1.06;
  --lh-h1: 1.12;
  --lh-h2: 1.18;
  --lh-h3: 1.24;
  --lh-h4: 1.34;
  --lh-body: 1.6;

  /* --- Spacing (4px base) --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-y: var(--space-9);   /* desktop rhythm; stepped down in media queries */
  --content-max: 72rem;          /* 1152px */
  --measure: 65ch;               /* text column cap */
  --gutter: var(--space-5);

  /* --- Radius (one family) ------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* --- Dark theme via OS preference -------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1526;
    --surface: #241C33;
    --surface-sunken: #140F1E;
    --ink: #F2ECFA;
    --ink-muted: #B9AECB;
    --primary: #C6A9E6;
    --primary-hover: #D6C0EF;
    --accent: #F0A0C4;
    --accent-hover: #F4B4D2;
    --plum-ink: #C9BBDD;
    --wheat: #E68FB5;
    --border: #382C4A;
    --focus: #F0A0C4;
    --btn-label: #1B1526;      /* dark label on luminous fills */
    --border-strong: #B9AECB;
    --shadow-float: 0 8px 28px -8px rgba(0, 0, 0, 0.55);
    /* On dark, the display sheen uses light lavender->pink stops (>= 6.8:1) */
    --display-gradient: linear-gradient(120deg, #C6A9E6 0%, #D08AC0 100%);
  }
}
/* Theme is system-driven only (prefers-color-scheme). No manual override. */