/*
 * Business Website Co. — Rose Noir design tokens (centralized)
 *
 * Single source of truth for color tokens, replacing the 13 duplicated
 * inline :root blocks that existed per-page in the original 3DW source.
 * Injected into every page's <head> by build.js, the same way header.html
 * and footer.html are injected into the body.
 *
 * STATUS OF VALUES BELOW:
 *   - background / surface / foreground / primary / accent / on-primary /
 *     muted / border / brand-rose: APPROVED (Founding Brief, Rose Noir spec).
 *   - --color-bg-elevated / --color-text-muted: derived third-tier values
 *     (DR-4) -- proposed, pending contrast verification, not yet signed off.
 *   - --status-success / --status-warning / --status-error: PROPOSED (DR-13)
 *     functional utility colors, NOT part of the five-color brand palette,
 *     documented here separately as instructed. Pending Jeff's sign-off and
 *     contrast verification before they are considered final.
 *
 * Theme resolution order: explicit [data-theme] attribute > system
 * `prefers-color-scheme` (via light-dark()) > dark (signature presentation).
 */

:root {
  color-scheme: light dark;

  /* ---- Permanent brand identity (theme-invariant) ---- */
  --color-brand-rose: #CB4E7A;

  /* ---- Five-color brand palette (APPROVED) ---- */
  --color-bg-primary:      light-dark(#F8F1F4, #17141C); /* background */
  --color-bg-secondary:    light-dark(#FFFFFF, #382935); /* surface */
  --color-text-primary:    light-dark(#17141C, #F8F1F4); /* foreground */
  --color-accent-primary:  light-dark(#A52D5B, #E48AAF); /* primary (accessible CTA) */
  --color-cta-fill:        var(--color-accent-primary);
  --color-cta-text:        light-dark(#FFFFFF, #17141C); /* on-primary */
  --color-text-secondary:  light-dark(#6B5863, #CDBDC6); /* muted */
  --color-border-subtle:   light-dark(#E7D9E0, #594451);  /* border */
  --color-accent-secondary: #B88FA0; /* accent (dusty rose) -- replaces legacy decorative orange */

  /* ---- Derived third-tier values (DR-4 -- proposed, pending contrast check) ---- */
  --color-bg-elevated:     light-dark(#FFFFFF, #423240);
  --color-text-muted:      light-dark(#73636B, #9B8A94);

  /* ---- Functional status tokens (DR-13 -- proposed, NOT brand colors) ---- */
  --status-success: light-dark(#1E7A46, #4ADE80);
  --status-warning: light-dark(#B45309, #FBBF24);
  --status-error:   light-dark(#B42318, #FCA5A5);
  /* Legacy alias retained only so unconverted component CSS keeps working
     during the migration; --color-accent-success itself is removed from use. */
  --color-accent-success: var(--status-success);

  /* ---- Typography / spacing / radius / motion (unchanged from source) ---- */
  --font-heading: 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'Poppins', 'Arial', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --text-hero: clamp(40px, 5vw, 64px);
  --text-h2: clamp(28px, 3.5vw, 40px);
  --text-h3: 24px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-label: 12px;
  --text-price: 48px;

  --leading-hero: 1.1;
  --leading-h2: 1.2;
  --leading-h3: 1.35;
  --leading-body-lg: 1.6;
  --leading-body: 1.5;
  --leading-label: 1.35;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Explicit manual override -- wins over system preference when set */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg-primary: #F8F1F4;
  --color-bg-secondary: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-text-primary: #17141C;
  --color-text-secondary: #6B5863;
  --color-text-muted: #73636B;
  --color-accent-primary: #A52D5B;
  --color-cta-text: #FFFFFF;
  --color-border-subtle: #E7D9E0;
  --status-success: #1E7A46;
  --status-warning: #B45309;
  --status-error: #B42318;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-primary: #17141C;
  --color-bg-secondary: #382935;
  --color-bg-elevated: #423240;
  --color-text-primary: #F8F1F4;
  --color-text-secondary: #CDBDC6;
  --color-text-muted: #9B8A94;
  --color-accent-primary: #E48AAF;
  --color-cta-text: #17141C;
  --color-border-subtle: #594451;
  --status-success: #4ADE80;
  --status-warning: #FBBF24;
  --status-error: #FCA5A5;
}

/* Minimal functional styling for the new theme-toggle control (behavior
   only -- not a visual-design pass; full component styling is Workstream
   A.2/E scope, not yet authorized). */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-2xl, 999px);
  width: 40px;
  height: 24px;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.theme-toggle__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  transition: transform var(--duration-normal, 250ms) var(--ease-out, ease);
}
.theme-toggle[data-theme-mode="light"] .theme-toggle__dot { transform: translateX(0); }
.theme-toggle[data-theme-mode="dark"] .theme-toggle__dot,
.theme-toggle[data-theme-mode="system"] .theme-toggle__dot { transform: translateX(16px); }

/* Minimal functional styling for the consent banner (behavior only). */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-md, 16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.consent-banner__text {
  margin: 0 0 var(--space-sm, 8px) 0;
  color: var(--color-text-primary);
  font-size: var(--text-body-sm, 14px);
}
.consent-banner__actions { display: flex; gap: var(--space-sm, 8px); justify-content: flex-end; }
.consent-banner__btn {
  appearance: none;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 8px 14px;
  font-size: var(--text-body-sm, 14px);
  cursor: pointer;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.consent-banner__btn--accept {
  background: var(--color-accent-primary);
  color: var(--color-cta-text);
  border-color: transparent;
}

/* Theme-aware logo swap (Stage 3B.1 design correction). Two <img> tags per
   placement (nav, footer); CSS shows the one matching the active theme.
   Default (no explicit [data-theme]) follows system preference, same
   resolution order as the color tokens above. */
.logo-for-dark { display: inline-block; }
.logo-for-light { display: none; }

@media (prefers-color-scheme: light) {
  .logo-for-dark { display: none; }
  .logo-for-light { display: inline-block; }
}

:root[data-theme="dark"] .logo-for-dark { display: inline-block; }
:root[data-theme="dark"] .logo-for-light { display: none; }
:root[data-theme="light"] .logo-for-dark { display: none; }
:root[data-theme="light"] .logo-for-light { display: inline-block; }