/*
  Design tokens — the only place brand values are defined.
  Every other stylesheet references these custom properties instead of
  hardcoding colors, spacing, or type sizes.
*/

:root {
  /* Brand colors (locked, Phase 0) */
  --color-brand: #0073ff;
  --color-brand-deep: #007bd2;
  --color-brand-bright: #00a7ff;
  --color-brand-light: #3dc7f1;
  --color-surface-tint: #f4feff;
  --color-white: #ffffff;

  /* Added alongside the Phase 0 set, per direct request, as the two
     stops of the primary brand gradient below — kept as named tokens
     (not just inline hex in the gradient) so they follow the same
     "every brand value is a custom property" rule as the rest of this
     palette. Individually available for accents/borders/icon fills if a
     future need arises, same as the other --color-brand-* tokens. */
  --color-brand-vivid: #0c64e8;
  --color-brand-cyan: #00b3ff;

  /* Primary brand gradient (updated per direct request — supersedes the
     original --color-brand → --color-brand-light pair; those tokens
     remain valid on their own, just no longer combined into this
     gradient). Smooth 0%→100% blend, used only on non-text decorative
     surfaces (.section--accent, .feature-list bullets) — white text on top
     of this exact blend measures as low as 2.36:1 at the light end
     (verified), well under WCAG AA, so nothing with text ever uses this
     token directly. --gradient-button below is the accessibility-safe
     derivative for that case. */
  --gradient-primary: linear-gradient(135deg, var(--color-brand-vivid) 0%, var(--color-brand-cyan) 100%);

  /* Button gradient — the same primary brand gradient above, reshaped
     for white text. Centered text on a 135deg gradient sits around the
     50% mark, so the flat dark zone must extend PAST 50% (not stop
     exactly at it) for the full text block — not just its center
     point — to stay on safe color. 58% is the smallest stop that does
     that with real margin: at 58% white-on-flat measures 5.25:1
     (verified); a plain 50% stop was tried first and rejected — a
     135deg gradient's true midpoint interpolation measures only
     ~3.46:1, failing AA. This is as close to an even 50/50 visual split
     as the gradient can go without that failure — reuse 58%, not a
     smooth blend or an exact 50%, if these colors change again.
     Reused as-is (identical token, not just matching colors) for the
     footer background per direct request — one token, two surfaces,
     both verified. */
  --gradient-button: linear-gradient(135deg, var(--color-brand-vivid) 0%, var(--color-brand-vivid) 58%, var(--color-brand-cyan) 100%);

  /* Text and neutral surfaces */
  --color-ink: #10202e;
  --color-ink-muted: #4b5d6b;
  --color-border: #dce6ec;
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-surface-tint);
  --color-footer-bg: #06172c;
  --color-footer-text: #d6e6f2;
  --color-footer-border: #16324d;

  /* Accessible text-link color — same hue/saturation as --color-brand,
     darkened so normal-size link text clears WCAG AA (4.5:1) against both
     --color-surface and --color-surface-alt. --color-brand itself measures
     ~4.29:1 on white and stays reserved for accents, borders, and larger
     UI surfaces where the relaxed non-text/large-text threshold applies. */
  --color-link: #0063db;

  /* Feedback (restrained — used only where a genuine notice exists) */
  --color-notice-border: var(--color-brand);
  --color-notice-bg: var(--color-surface-tint);

  /* Spacing scale, 8px base unit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  /* Section-level vertical rhythm — responsive so mobile isn't just a
     scaled-down copy of the desktop value. `.section`/`.section--tight`
     (layout.css) are the ONLY consumers; every page type (homepage, hub,
     provider, guide/policy/blog article) shares these two tokens so a
     "standard section" reads the same everywhere. Fixed steps (--space-6/7)
     don't flex with viewport width the way clamp() does, which is why
     these are separate tokens rather than reusing the numeric scale directly. */
  --space-section: clamp(2.75rem, 2rem + 3.5vw, 5rem);
  --space-section-tight: clamp(2rem, 1.375rem + 2.75vw, 4rem);

  /* Semantic aliases for the permanent site-wide content-rhythm hierarchy
     — see PROJECT.md, "Site-Wide Spacing / Vertical Rhythm," for the full
     relationship table this is the standing rule for. Same values as the
     numbered scale above; these exist so a spacing decision can be named
     by its relationship tier ("this is a large-tier gap") instead of
     requiring anyone to remember which numbered step maps to which tier.
     Any NEW content-rhythm spacing (a relationship in that table, or a
     genuinely new one like it) should reach for one of these four before
     reaching for the numbered scale or a one-off value. Non-rhythm spacing
     (card/button padding, container gutters, icon gaps, etc.) keeps using
     the numbered scale directly — these four are specifically for "how
     far apart do two pieces of content/section sit," not general spacing. */
  --space-sm: var(--space-2);       /* tightly related: heading -> its paragraph/list, title -> description, icon -> label */
  --space-md: var(--space-4);       /* related content group (the default): paragraph -> paragraph, paragraph/heading -> grid or cards */
  --space-lg: var(--space-5);       /* major transition: grid/list -> closing CTA, feature list -> CTA, content group -> divider */
  --space-xl: var(--space-section); /* section -> section (responsive) */

  /* Global section-accent — the small gradient line marking the start of
     a major section (see .section--accent in components.css). One
     system, one set of tokens; every major section site-wide reuses
     these instead of a page-specific accent. Width is fluid like
     --space-section above (mobile reads slightly shorter, never a
     breakpoint jump); height and the accent's own gap to the heading
     stay fixed — a 1-2px/label difference isn't perceptible enough to
     need to flex. --section-accent-gap reuses --space-sm: this is the
     same "tightly related, read as one unit" relationship as an eyebrow
     sitting right above its heading. */
  --section-accent-width: clamp(4rem, 3.5rem + 1.5vw, 5rem);
  --section-accent-height: 0.375rem;
  --section-accent-gap: var(--space-sm);

  /* Containers */
  --container-max: 75rem;
  --container-narrow: 45rem;
  --container-padding: var(--space-3);

  /* Typography — system stack by default, see base.css for rationale */
  --font-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* Shadow — one restrained level, used sparingly */
  --shadow-sm: 0 1px 2px rgba(16, 32, 46, 0.06), 0 1px 3px rgba(16, 32, 46, 0.08);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/*
  Breakpoint reference (not usable as custom properties inside @media,
  kept here as the single documented source of truth):
  --bp-sm: 640px
  --bp-md: 960px
  --bp-lg: 1280px
*/