/*
 * ShiftMed design tokens (SPEC.md 5.1). This is the only file that defines colors, and it uses
 * only the colors SPEC.md section 0 allows: the brand palette plus the live shiftmed.com colors
 * Marketing approved on 2026-10-15 (open question Q1, answered), plus the live homepage hero
 * colors (issue 350), approved by Marketing, reported by the owner on 2026-10-26. Everything else uses
 * var(--sm-...). tests/unit/palette.test.ts and tests/unit/contrast.test.ts enforce both rules.
 */
:root {
  --sm-purple: #7200a0; /* primary: links, buttons, logo, dark sections */
  --sm-teal: #76d5d4; /* accents and highlights, never body text on white */
  --sm-charcoal: #403333; /* headings and body text */
  --sm-coral: #ff5670;
  --sm-orange: #ffb81c;
  --sm-lime: #d2db0e;
  --sm-gray-light: #e9e7e5; /* soft section backgrounds, borders */
  --sm-white: #ffffff;

  /* Live-site colors approved by Marketing (Q1), with their role on shiftmed.com */
  --sm-purple-dark: #44045a; /* primary button hover; headings on light teal */
  --sm-purple-deep: #5b0080; /* primary button hover border */
  --sm-purple-mid: #9d4dbd; /* input and box borders */
  --sm-lavender: #e6d1ee; /* pill borders, map land, past steps; never text on white */
  --sm-lavender-wash: #f4ebf7; /* hero fade end, pill backgrounds; never text on white */
  --sm-teal-dark: #549092; /* secondary button hover (white text), small labels; large text only: white text fails AA at normal size (3.63:1) */
  --sm-teal-light: #c3e3e0; /* light teal sections and cards; never text on white */
  --sm-teal-hover: #84d9d8; /* secondary button hover border */
  --sm-teal-bright: #8ddcdb; /* teal pill gradient start */
  --sm-lime-light: #dce6a9; /* light lime sections */
  --sm-gray-text: #595959; /* secondary text, form borders */
  --sm-gray-wash: #f3f3f3; /* footer and soft bands; never text on white */
  --sm-gray-warm: #f4f3f2; /* "how it works" band, hero fade middle; never text on white */

  /*
   * The live homepage hero's own colors (issue 350, HERO_PALETTE in src/shared/brand-palette.ts),
   * approved by Marketing, reported by the owner on 2026-10-26. None is ever a text color
   * (tests/unit/contrast.test.ts). Lilac is approved only as the 22% glow below, so it is not in
   * the content lint's palette.
   */
  --sm-purple-bright: #8800bf; /* primary pill gradient start */
  --sm-lavender-mist: #f8f2fa; /* hero stat card borders */
  --sm-lilac: #bca5e9; /* base of the hero glow only; use --sm-lilac-glow */

  /* Type. Each brand family is followed by its metric-matched fallbacks (shell.css, issue 327). */
  /* Headlines, pull quotes, stat figures */
  --sm-font-head:
    "Barlow Semi Condensed", "Barlow Semi Condensed Fallback Narrow",
    "Barlow Semi Condensed Fallback", "Arial Narrow", sans-serif;
  /* Body, buttons, captions, subheads */
  --sm-font-body: "Poppins", "Poppins Fallback", Arial, sans-serif;

  /*
   * Type scale, measured from the live shiftmed.com (hero and section headings 48px, card
   * headings 29px at 1440px wide), with measurements from the Home v8 reference where the live
   * site matches. Each size adds rem to vw, so text still grows with browser zoom.
   */
  --sm-text-display: clamp(2.75rem, 1.5rem + 3.5vw, 4.5rem);
  --sm-text-h1: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  --sm-text-h2: clamp(1.75rem, 1.25rem + 2.25vw, 3rem);
  --sm-text-h3: clamp(1.375rem, 1.125rem + 0.75vw, 1.8125rem);
  --sm-text-body: 1rem;
  --sm-text-small: 0.875rem;
  --sm-text-eyebrow: 0.75rem; /* uppercase labels such as "HOW IT WORKS" */
  --sm-text-tag: 0.6875rem; /* 11px uppercase pill tags */
  --sm-leading-display: 1.05;
  --sm-leading-heading: 1.2;
  --sm-leading-snug: 1.45;
  --sm-leading-body: 1.6;
  --sm-tracking-display: -0.01em;
  --sm-tracking-eyebrow: 0.1em; /* uppercase eyebrows and tags, estimated from the live site */

  /* Space, 4 to 96px */
  --sm-space-4: 0.25rem;
  --sm-space-8: 0.5rem;
  --sm-space-12: 0.75rem;
  --sm-space-16: 1rem;
  --sm-space-24: 1.5rem;
  --sm-space-32: 2rem;
  --sm-space-48: 3rem;
  --sm-space-64: 4rem;
  --sm-space-96: 6rem;

  /* Shape. The card, pill and sm names predate the scale and keep their values. */
  --sm-radius-4: 4px;
  --sm-radius-8: 8px;
  --sm-radius-12: 12px;
  --sm-radius-20: 20px;
  --sm-radius-28: 28px;
  --sm-radius-pill: 2rem;
  --sm-radius-card: var(--sm-radius-20);
  --sm-radius-sm: var(--sm-radius-8);

  /*
   * The footer logo's width (issue 374): shell.css sizes the image with it and access.css's phone
   * nudge reads it. Its width attribute is `FOOTER_LOGO_WIDTH` in
   * src/shared/chrome/site-footer.tsx; tests/unit/footer-logo-width.test.ts checks they match.
   */
  --sm-logo-footer-width: 167px;

  /*
   * Shadows: charcoal at low alpha. Offsets and blur use measurements from the Home v8 reference,
   * where the live site matches (v8 colors are not used). Only this file may use color-mix(),
   * and only as color-mix(in srgb, var(--sm-<color>) N%, transparent);
   * tests/unit/palette.test.ts enforces both.
   */
  --sm-shadow-card:
    0 4px 10px color-mix(in srgb, var(--sm-charcoal) 6%, transparent),
    0 2px 4px color-mix(in srgb, var(--sm-charcoal) 4%, transparent);
  --sm-shadow-raised:
    0 12px 28px color-mix(in srgb, var(--sm-charcoal) 10%, transparent),
    0 4px 8px color-mix(in srgb, var(--sm-charcoal) 5%, transparent);
  /* The access page header's soft all-round shadow, as on the live nav (issue 354). */
  --sm-shadow-nav: 0 0 10px color-mix(in srgb, var(--sm-gray-text) 20%, transparent);
  /* Its floating mobile menu panel's shadow, as live (issue 354). */
  --sm-shadow-menu: 0 18px 40px color-mix(in srgb, var(--sm-charcoal) 18%, transparent);
  /* White at low alpha: the dark hero's decorative circles. */
  --sm-white-faint: color-mix(in srgb, var(--sm-white) 10%, transparent);
  /* Lilac at 22%: the access page hero's radial glow, as on the live homepage (issue 350). */
  --sm-lilac-glow: color-mix(in srgb, var(--sm-lilac) 22%, transparent);
  /*
   * The access page hero (access.css, issue 351), as on the live homepage: the primary pill's
   * shadow, its hover and focus shadow and its arrow circle; the stat cards' shadow and their
   * background on phones; the hub's shadow and the start of its pulse ring.
   */
  --sm-hero-pill-shadow:
    0 12px 28px color-mix(in srgb, var(--sm-purple) 38%, transparent),
    inset 0 2px 3px color-mix(in srgb, var(--sm-white) 30%, transparent);
  --sm-hero-pill-shadow-hover:
    0 18px 38px color-mix(in srgb, var(--sm-purple) 50%, transparent),
    inset 0 2px 3px color-mix(in srgb, var(--sm-white) 30%, transparent);
  --sm-hero-pill-icon: color-mix(in srgb, var(--sm-white) 20%, transparent);
  --sm-hero-card-shadow: 0 12px 28px color-mix(in srgb, var(--sm-charcoal) 12%, transparent);
  --sm-hero-card-phone: color-mix(in srgb, var(--sm-white) 94%, transparent);
  --sm-hero-hub-shadow: 0 12px 34px color-mix(in srgb, var(--sm-purple) 20%, transparent);
  --sm-hero-hub-ring: color-mix(in srgb, var(--sm-purple) 32%, transparent);

  /* Motion: hover and focus transitions only (220ms), none under prefers-reduced-motion. */
  --sm-motion-fast: 140ms;
  --sm-motion-base: 220ms;
  --sm-motion-slow: 360ms;
  --sm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}