/* Design Tokens - Velvet Cinema
 * Generated by /design-direction (2026-03-27)
 * Source of truth for all design values. Import in style.css.
 * Full color system in visual-design spec: docs/superpowers/specs/2026-03-23-visual-design.md
 */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root,
[data-theme="light"] {
  /* Backgrounds - warm cream palette */
  --color-bg: #f5ebe5;
  --color-bg-alt: #efe2db;
  --color-bg-mid: #faf6f3;
  --color-bg-elevated: #f8ede6;
  --color-bg-footer: #efe2db;
  --color-bg-card: #f8ede6;
  /* Always-light tile for product photos (white studio backdrops). Intentionally
     NOT overridden in the dark block, so product shots sit on a clean light card
     in both themes - the photo's white bg blends and any contain margin never
     reads as a dark gap. */
  --color-product-mat: #f7f3f0;

  /* Borders */
  --color-border: rgba(58, 40, 40, 0.1);
  --color-border-hover: rgba(58, 40, 40, 0.2);

  /* Text */
  --color-heading: #3a2828;
  --color-body: #5a4a44;
  --color-muted: #685850;

  /* Accents */
  --color-eyebrow: #7d5252; /* was #8a5c5c - AA on cream (eyebrows, team-card roles) */
  --color-accent: #4daab8;
  --color-accent-hover: #3d949f;
  --color-rose: #d4a0a0;
  /* Ink for text sitting ON the rose fill. --color-bg-card is NOT a substitute:
     it is rgba(255,255,255,.05) in dark theme, so using it as a foreground gives
     5%-alpha white on rose (2.25:1, fails AA). Same value the .section--rose scope
     already uses for --color-heading; identical in both themes because the rose
     fill itself is. 7.5:1 on #d4a0a0. */
  --color-on-rose: #2a1a1a;
  --color-rose-deep: #a97672; /* was #b8807c - AA 3:1 for the large rose italic accents (signature preserved) */
  /* Decorative atmosphere glow. Saturated warm rose-pink in light - reads as
     intentional warm color against the cream page (the muted rose-deep went
     muddy, a teal glow read as dark-mode shading bleeding through); teal in
     dark (see dark block). */
  --color-accent-glow: #cf7089;

  /* Links */
  --color-link: #2d7a86;

  /* Conversion CTA (.btn--cta) + active nav.
     These are the two surfaces that pair text directly on a brand colour at
     13-14px, where WCAG AA wants 4.5:1. The display rose (--color-rose-deep,
     used for hero accents and italics) stays exactly as it was; this is a
     deeper sibling used ONLY as a button fill so the accent look is unchanged.
     white on #996a67 = 4.55:1 (was 3.27 on #b8807c). */
  --color-cta-bg: #996a67;
  --color-cta-bg-hover: #8a5f5c;
  --color-cta-text: #ffffff;
  /* teal on cream at 14.4px was 2.31:1 */
  --color-nav-active: #34747d;

  /* Buttons */
  --color-btn-primary-bg: #4daab8;
  --color-btn-primary-text: #1a3a3e;
  --color-btn-outline-border: #3a2828;
  --color-btn-outline-text: #3a2828;

  /* Focus */
  --color-focus-ring: #4daab8;

  /* States */
  --color-success: #175730; /* was #2a8a52 - AA for the "Now hiring" tag on cream */
  --color-warning: #a67a1a;
  --color-error: #c0392b;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(58, 40, 40, 0.04);
  --shadow-md: 0 4px 8px rgba(58, 40, 40, 0.06);
  --shadow-lg: 0 10px 20px rgba(58, 40, 40, 0.08);
  --shadow-xl: 0 20px 40px rgba(58, 40, 40, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Gradient accent line */
  --gradient-accent: linear-gradient(90deg, #4daab8, #d4a0a0);

  /* Section gradient transitions */
  --gradient-cream: #f5ebe5;
  --gradient-cream-alt: #efe2db;
  --gradient-dark: #073542;
  --gradient-dark-deep: #05242e;
  --gradient-accent-solid: #4daab8;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg: #073542;
  --color-bg-alt: #05242e;
  --color-bg-mid: #0c3a40;
  --color-bg-elevated: #0a4555;
  --color-bg-footer: #021a22;
  --color-bg-card: rgba(255, 255, 255, 0.05);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);

  /* Text */
  --color-heading: #ffffff;
  --color-body: #9cbcc6;
  --color-muted: #8bb0bb; /* was #6a9aa8 - AA on dark-teal surfaces (meta/timestamps/labels) */

  /* Accents */
  --color-eyebrow: #d4a0a0;
  --color-accent: #0fa4b6;
  --color-accent-hover: #0d8e9e;
  --color-rose: #d4a0a0;
  /* Ink for text sitting ON the rose fill. --color-bg-card is NOT a substitute:
     it is rgba(255,255,255,.05) in dark theme, so using it as a foreground gives
     5%-alpha white on rose (2.25:1, fails AA). Same value the .section--rose scope
     already uses for --color-heading; identical in both themes because the rose
     fill itself is. 7.5:1 on #d4a0a0. */
  --color-on-rose: #2a1a1a;
  --color-rose-deep: #e8b9b6;
  /* Decorative atmosphere glow: teal reads as shading in dark mode. */
  --color-accent-glow: var(--color-accent);

  /* Links */
  --color-link: #0fa4b6;

  /* Conversion CTA + active nav (see the light block for the reasoning).
     Dark keeps the vivid brand cyan untouched and instead darkens the LABEL to
     the deep teal-black used by the CTA band: #021a22 on #0fa4b6 = 5.97:1,
     where white on the same cyan was 2.99:1. Nav active lifts slightly instead
     (on a dark field, darkening would have made it worse): 4.39 -> 4.65:1. */
  --color-cta-bg: var(--color-accent);
  --color-cta-bg-hover: var(--color-accent-hover);
  --color-cta-text: #021a22;
  --color-nav-active: #1ba9ba;

  /* Buttons */
  --color-btn-primary-bg: #0fa4b6;
  --color-btn-primary-text: #073542;
  --color-btn-outline-border: #d4a0a0;
  --color-btn-outline-text: #d4a0a0;

  /* Focus */
  --color-focus-ring: #0fa4b6;

  /* States */
  --color-success: #2ecc71;
  --color-warning: #f0ad4e;
  --color-error: #e74c3c;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.3);

  /* Gradient accent line */
  --gradient-accent: linear-gradient(90deg, #0fa4b6, #d4a0a0);

  /* Section gradient transitions (dark-to-dark = subtler shifts) */
  --gradient-cream: #073542;
  --gradient-cream-alt: #05242e;
  --gradient-dark: #05242e;
  --gradient-dark-deep: #021a22;
  --gradient-accent-solid: #0fa4b6;
}

/* ============================================
   ROSE ACCENT SECTION (Trichology/Medical)
   ============================================ */
.section--rose {
  --color-bg: #d4a0a0;
  --color-heading: #2a1a1a;
  --color-body: #3a2828;
  --color-eyebrow: #2a1a1a;
}

[data-theme="dark"] .section--rose {
  --color-bg: #3a2020;
  --color-heading: #f5ebe5;
  --color-body: #d4b8b8;
  --color-muted: #b89898;
  --color-eyebrow: #d4a0a0;
  --color-accent: #4daab8;
  --color-border: rgba(212, 160, 160, 0.15);
  --color-bg-elevated: #4a2828;
  --color-bg-card: #4a2828;
  --color-btn-primary-bg: #4daab8;
  --color-btn-primary-text: #1a3a3e;
}

/* ============================================
   CTA ACCENT SECTION
   ============================================ */
/* Light mode: bright teal accent band - a punch of color against the
   cream page. Dark navy text + dark primary button = LOUD.            */
/* Light CTA: warm cream DEPTH, not a flat teal slab (Ben-approved 2026-07-07).
   Teal drops to an accent only; the rose-deep button carries the punch. The
   cream gradient + rose glow + ghosted KB monogram live in style.css. Photo-
   backed .landing-cta and the already-cream .insp-cta override this. */
[data-theme="light"] .section--cta {
  --color-bg: #f8ede6;
  --color-heading: #3a2828;
  --color-body: #5a4a44;
  --color-muted: #685850;
  --color-eyebrow: #8a5c5c;
  /* Same swap as .btn--cta: a plain .btn--primary inside a light CTA band was
     also white-on-display-rose (3.27:1). */
  --color-btn-primary-bg: var(--color-cta-bg);
  --color-btn-primary-text: var(--color-cta-text);
  --color-accent-hover: #a66f6b;
  --color-btn-outline-border: var(--color-heading);
  --color-btn-outline-text: var(--color-heading);
}
/* Dark mode INVERTS the language: the page is already brand teal, so
   the same bright-cyan slab would feel redundant. Drop into near-black
   instead - a "closing chapter" moment - and let cyan + rose accents
   carry the energy. LUXE, not LOUD.                                   */
[data-theme="dark"] .section--cta {
  --color-bg: #021a22;
  --color-heading: #f5ebe5;
  --color-body: rgba(245, 235, 229, 0.72);
  --color-btn-primary-bg: #0fa4b6;
  --color-btn-primary-text: #021a22;
  --color-btn-outline-border: #d4a0a0;
  --color-btn-outline-text: #d4a0a0;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
:root {
  /* Font Families */
  /* Each stack: self-hosted webfont -> metric-matched fallback (@font-face in
     fonts.css, reserves the SAME box so there's no swap reflow) -> system font. */
  --font-display: "Schibsted Grotesk", "Schibsted Grotesk Fallback", Arial, sans-serif;
  --font-serif: "Fraunces", "Fraunces Fallback", Georgia, serif; /* editorial display headlines (Velvet Cinema) */
  --font-body: "Lexend", "Lexend Fallback", Arial, sans-serif;

  /* Type Scale (fluid, mobile-first) */
  --text-2xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --text-hero: clamp(3rem, 2rem + 5vw, 8rem);

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ============================================
     SPACING
     ============================================ */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);

  /* Container Widths */
  --container-max: 1280px;
  --container-narrow: 768px;
  --container-wide: 1440px;
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ============================================
     BORDER RADIUS (Velvet Cinema: soft + rounded)
     ============================================ */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  --radius-card: 1rem;
  --radius-button: 0.75rem;
  --radius-image: 0.75rem;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================
     SCROLLBARS (premium, token-driven, theme-adaptive)
     Derived from --color-heading so they auto-flip with the theme:
     a warm-brown thumb on cream (light), a soft near-white thumb on
     teal-dark (dark). Resolved at use-site, so they also adapt inside
     remapped sections (cream/rose) automatically. No per-theme overrides.
     ============================================ */
  --scrollbar-track: color-mix(in srgb, var(--color-heading) 6%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--color-heading) 24%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-heading) 42%, transparent);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-header: 50;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;
  --z-max: 100;
}