/* ==========================================================================
   DAPPER DOUGHNUT — DESIGN TOKENS (v4 — exact canonical brand palette)
   v4 (§2) COLOR ACCURACY RULE: every brand color below is one of the client's
   confirmed canonical hex values — never a darkened/muted approximation.
   Canonical palette (from the client's brand color PDF, hex-verified):
     Teals:    #34E0E8 bright cyan · #00A59D core teal · #30B8BF mid teal
               #007241 deep teal-green · #D0E0D7 pale sage
     Pinks:    #E55395 core magenta · #ED809F soft rose · #FF7DAC bright pink
               #F99898 coral
     Golds:    #F6B333 core gold · #F8C25C light gold · #FBE1AD cream
               #7B5A1A deep brown-gold · #F4CFB2 warm peach
     Neutrals: #555559 · #2B2B2D · #151516 · #BBBBBD
   Contrast problems are solved by choosing dark ink (#151516) on bright brand
   surfaces, or an already-dark real brand color (#007241, #151516) under white
   text — NEVER by inventing a darker shade of a bright brand hex.
   ========================================================================== */

:root,
[data-theme='light'] {
  /* ---- Surfaces ---- */
  --color-bg: #fffdf9;
  --color-surface: #ffffff;
  --color-surface-2: #fffdf9;
  --color-cream: #fbe1ad;
  --color-sage: #d0e0d7;
  --color-surface-offset: #fbe1ad;
  --color-surface-offset-2: #d0e0d7;
  --color-surface-dynamic: #f8c25c;
  --color-divider: #e3d5bd;
  --color-border: #d8c6a4;

  /* ---- Text (charcoal ink) ---- */
  --color-text: #151516;
  --color-text-muted: #555559;
  --color-text-faint: #bbbbbd;
  --color-text-inverse: #fffdf9;
  --color-charcoal: #151516;
  --color-charcoal-soft: #2b2b2d;

  /* ---- Primary Accent (Dapper Core Teal — canonical) ---- */
  --color-primary: #00a59d;
  --color-primary-hover: #007241; /* real deep teal-green, not a darkened teal */
  --color-primary-active: #007241;
  --color-primary-highlight: #d0e0d7;
  --color-cyan-bright: #34e0e8; /* the client's "brighter green" — use for vivid pops */
  --color-link-strong: #007241; /* v4 (§2): small inline links — real deep teal-green, 6.0:1 on white */

  /* ---- Secondary Accent (Dapper Core Magenta — canonical) ---- */
  --color-coral: #e55395;
  --color-coral-hover: #ff7dac; /* real bright pink for hover states */
  --color-coral-active: #e55395;
  --color-coral-highlight: color-mix(in srgb, #ff7dac 22%, #ffffff);

  /* ---- Tertiary Accent (Dapper Mid Teal — decorative only) ---- */
  --color-mint: #30b8bf;
  --color-mint-highlight: #d0e0d7;

  /* ---- Warning ---- */
  --color-warning: #7b5a1a;
  --color-warning-hover: #7b5a1a;
  --color-warning-highlight: #f4cfb2;

  /* ---- Error (magenta family; error TEXT always sits on a pale tint) ---- */
  --color-error: #e55395;
  --color-error-hover: #ff7dac;
  --color-error-highlight: color-mix(in srgb, #ff7dac 22%, #ffffff);

  /* ---- Success ---- */
  --color-success: #007241;
  --color-success-hover: #007241;
  --color-success-highlight: #d0e0d7;

  /* ---- Gold (canonical core gold + light gold) ---- */
  --color-gold: #f6b333;
  --color-gold-light: #f8c25c;
  --color-gold-deep: #7b5a1a; /* real deep brown-gold — small gold-family text on light */
  --color-gold-highlight: #fbe1ad;

  /* ---- Radius ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.5rem;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(32, 28, 24, 0.08);
  --shadow-md: 0 8px 24px rgba(32, 28, 24, 0.1);
  --shadow-lg: 0 20px 48px rgba(32, 28, 24, 0.16);

  /* ---- Content widths ----
     v12 (§1): fluid, viewport-tied widths. The old fixed caps (640/980/1240)
     read as a squeezed center column with huge unused background on real
     desktop widths (client screenshots at their own browser width, wider than
     our 1920px audit). Each token keeps its old value as the clamp() FLOOR
     (≤1280px viewports render exactly as before) and grows proportionally
     with the viewport up to a deliberate ceiling. */
  --content-narrow: clamp(640px, 30vw + 260px, 900px);
  --content-default: clamp(980px, 48vw + 370px, 1280px);
  --content-wide: clamp(1240px, 60vw + 470px, 1680px);
  --content-full: 100%;

  /* v12 (§1): module widths — card/form/comparison modules are NOT flowing
     text, so the line-length readability argument doesn't apply; these grow
     noticeably more than prose so they feel substantial on wide monitors. */
  --module-wide: clamp(920px, 52vw + 260px, 1480px); /* 2-up comparison/combo card modules */
  --module-mid: clamp(760px, 36vw + 300px, 1120px); /* single centered cards, forms, hero copy block */
  --module-narrow: clamp(640px, 30vw + 260px, 920px); /* badge cards, small centered modules */

  /* v12 (§1): prose measures — flowing text KEEPS a readability cap, but the
     cap is fluid instead of a fixed early ceiling. ch-based so it tracks the
     text's own size; floors match (or slightly exceed) the old fixed caps. */
  --measure-lede: clamp(46ch, 36ch + 12vw, 64ch); /* body-size ledes/intros (was 46–52ch fixed) */
  --measure-lede-lg: clamp(52ch, 42ch + 12vw, 68ch); /* text-lg ledes: hero copy, manifesto, page-hero (was 46–52ch/640px) */
  --measure-prose-wide: clamp(72ch, 60ch + 10vw, 80ch); /* long-form body prose: legal text, wide intros (was 62–72ch/640px) */
  --measure-head: clamp(720px, 34vw + 300px, 1060px); /* .section-head heading blocks (was 720px) */

  /* ---- Fonts (official brand type system, self-hosted) ---- */
  /* v5 (§6): LEGIBILITY — Shopie's connected script letterforms are hard to read
     at large display sizes, so every big headline now sets in Grandview Bold
     (the client's real non-script brand font). Shopie remains ONLY for the small
     eyebrow/accent script labels via --font-script / .accent-script. */
  --font-display: 'Grandview', 'Helvetica Neue', sans-serif;
  --font-body: 'Grandview', 'Helvetica Neue', sans-serif;
  --font-script: 'Shopie', cursive;

  /* ---- v4 (§6): Header chrome — core teal, theme-independent brand surface
     (like the footer). White nav text/logo; gold CTA for contrast. ---- */
  --header-bg: #00a59d;

  /* ---- v4 (§2): Pinstripe system — canonical brand hexes only ---- */
  --ps-teal: #00a59d;
  --ps-magenta: #e55395;
  --ps-gold: #f6b333;
  --ps-coral: #f99898;

  /* ---- v4 (§2): Color bands — the TRUE bright brand colors at full
     strength. Contrast is solved with ink color, not by muting the brand:
     large display headings may be white (WCAG AA large-text), all body/small
     text on bands is charcoal #151516. ---- */
  --band-teal: #00a59d;
  --band-magenta: #e55395;
  --band-gold: #f6b333;
  --band-ink: #ffffff; /* large headings only */
  --band-ink-body: #151516; /* body & small text on bright bands */
}

/* v4 (§2): dark theme (explicit toggle only) — surfaces are real canonical
   neutrals (#151516 / #2B2B2D); tinted surfaces are color-mix derivations of
   canonical brand hexes; accents use the real bright hexes unmodified. Brand
   bands and header stay the SAME true bright colors as light mode — the brand
   never dims. */
[data-theme='dark'] {
  --color-bg: #151516;
  --color-surface: #2b2b2d;
  --color-surface-2: color-mix(in srgb, #2b2b2d 78%, #151516);
  --color-cream: color-mix(in srgb, #f6b333 16%, #151516);
  --color-sage: color-mix(in srgb, #00a59d 14%, #151516);
  --color-surface-offset: color-mix(in srgb, #f6b333 16%, #151516);
  --color-surface-offset-2: color-mix(in srgb, #00a59d 14%, #151516);
  --color-surface-dynamic: #555559;
  --color-divider: color-mix(in srgb, #555559 45%, #151516);
  --color-border: color-mix(in srgb, #555559 65%, #151516);
  --color-text: #fbe1ad;
  --color-text-muted: #bbbbbd;
  --color-text-faint: color-mix(in srgb, #bbbbbd 55%, #151516);
  --color-text-inverse: #151516;
  --color-primary: #34e0e8;
  --color-primary-hover: #30b8bf;
  --color-primary-active: #00a59d;
  --color-primary-highlight: color-mix(in srgb, #00a59d 18%, #151516);
  --color-link-strong: #34e0e8; /* bright cyan-teal — 11.3:1 on near-black */
  --color-coral: #ff7dac;
  --color-coral-hover: #ed809f;
  --color-coral-active: #e55395;
  --color-coral-highlight: color-mix(in srgb, #e55395 24%, #151516);
  --color-mint: #30b8bf;
  --color-mint-highlight: color-mix(in srgb, #00a59d 18%, #151516);
  --color-warning: #f8c25c;
  --color-warning-hover: #f6b333;
  --color-warning-highlight: color-mix(in srgb, #f6b333 22%, #151516);
  --color-error: #ff7dac;
  --color-error-hover: #ed809f;
  --color-error-highlight: color-mix(in srgb, #e55395 24%, #151516);
  --color-success: #30b8bf;
  --color-success-hover: #00a59d;
  --color-success-highlight: color-mix(in srgb, #00a59d 18%, #151516);
  --color-gold: #f8c25c;
  --color-gold-light: #fbe1ad;
  --color-gold-deep: #fbe1ad;
  --color-gold-highlight: color-mix(in srgb, #f6b333 20%, #151516);
  /* header + bands: identical true brand colors in both themes */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}

/* v4 (§1): the @media (prefers-color-scheme: dark) { :root:not([data-theme]) }
   block was REMOVED on purpose. It created a second path to unwanted
   dark-by-default rendering. Light is the default for every visitor; dark mode
   is applied exclusively via [data-theme='dark'], set by the explicit toggle. */

/* ---- Type Scale ---- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 1rem + 6vw, 6.5rem);
}

/* ---- 4px Spacing System ---- */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}