/*
 * AdultPromos design tokens — the ONLY place color/type/spacing values are
 * defined as literals. Every other stylesheet must reference these
 * custom properties, never a hardcoded hex/px value.
 *
 * Dark/black theme with a vivid orange brand accent — deliberately a generic
 * orange-on-black palette (common across many industries), not a copy of any
 * specific competitor's trademarked logo/wordmark treatment.
 */

:root {
  /* ---------- Brand (light mode defaults) ---------- */
  --ap-primary: #f97316;         /* orange-500 — primary CTAs, links */
  --ap-primary-hover: #ea580c;   /* orange-600 */
  --ap-primary-active: #c2410c;  /* orange-700 */
  --ap-secondary: #dc2626;       /* red-600 — secondary accents */
  --ap-accent: #ca8a04;          /* yellow-600 — discount/deal highlight, distinct from primary orange */

  /* ---------- Logo-ring rotation (c0-c7) ----------
   * Deterministic per-entity ring color (apLogoRingClass()) — c0/c1/c2/c7
   * reuse --ap-primary/--ap-secondary/--ap-accent/--ap-surface above; c3-c6
   * are additional warm/orange-family-only shades, fixed (not theme-swapped)
   * so the same store always gets the same ring color regardless of the
   * visitor's light/dark preference. */
  --ap-rotate-c3: #ea580c;
  --ap-rotate-c4: #b45309;
  --ap-rotate-c5: #c2410c;
  --ap-rotate-c6: #991b1b;

  /* ---------- Surfaces ---------- */
  --ap-bg: #fafaf9;
  --ap-surface: #ffffff;
  --ap-surface-alt: #f5f5f4;
  --ap-border: #e7e5e4;

  /* ---------- Text ---------- */
  --ap-text: #1c1917;
  --ap-text-muted: #57534e;      /* ~6.5:1 on --ap-surface */
  --ap-text-inverse: #ffffff;

  /* ---------- Semantic ---------- */
  --ap-success: #16a34a;
  --ap-warning: #b45309;
  --ap-error: #dc2626;

  /* ---------- Typography ---------- */
  --ap-font-heading: 'Poppins', sans-serif;
  --ap-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ap-fs-h1: clamp(1.75rem, 5vw, 3rem);
  --ap-fs-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --ap-fs-h3: clamp(1.25rem, 2.5vw, 1.5rem);
  --ap-fs-h4: clamp(1.125rem, 2vw, 1.25rem);
  --ap-fs-h5: clamp(1rem, 1.5vw, 1.125rem);
  --ap-fs-h6: clamp(0.875rem, 1vw, 1rem);
  --ap-fs-body: 1rem;
  --ap-fs-sm: 0.875rem;
  --ap-lh-tight: 1.2;
  --ap-lh-body: 1.6;

  /* ---------- Spacing ---------- */
  --ap-space-xs: 0.25rem;
  --ap-space-sm: 0.5rem;
  --ap-space-md: 1rem;
  --ap-space-lg: 2rem;
  --ap-space-xl: 4rem;

  /* ---------- Radius / shadow / transition ---------- */
  --ap-radius-sm: 4px;
  --ap-radius-md: 8px;
  --ap-radius-lg: 16px;
  --ap-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
  --ap-transition: 200ms ease;

  /* ---------- Layout ---------- */
  --ap-container: 1280px;
  --ap-header-height: 64px;

  /* ---------- Header chrome ----------
   * Deliberately fixed (not overridden by dark mode below) so the header
   * stays one consistent near-black brand bar with reliable white/orange
   * contrast regardless of site theme — same pattern as the topbar. */
  --ap-header-bg: #0d0d0d;
  --ap-header-text: #ffffff;
  --ap-header-text-muted: rgba(255, 255, 255, 0.75);
  --ap-header-border: rgba(255, 255, 255, 0.15);
  --ap-topbar-bg: #171717;
  --ap-topbar-text: #e5e5e5;
  --ap-topbar-link: #fb923c;
  --ap-topbar-height: 36px;
  --ap-topbar-gap: 0px;
  --ap-subnav-height: 40px;

  /* Text/backdrop over always-dark contexts (photo overlays, gradient blobs,
   * badge chips) that don't invert with the site's light/dark theme — same
   * "fixed" rationale as the header chrome above. */
  --ap-overlay-text: #ffffff;
  --ap-logo-bg: #ffffff;

  /* Header search pill — always reads as a light-mode input regardless of
   * site theme (white background, dark text). Uses the warm-neutral values
   * from --ap-text/--ap-text-muted/--ap-surface-alt's light-mode defaults
   * below, fixed here rather than a stray purple-tinted grey. */
  --ap-header-search-bg: #ffffff;
  --ap-header-search-text: #1c1917;
  --ap-header-search-muted: #57534e;
  --ap-header-search-hover-bg: #f5f5f4;

  /* ---------- Interactive-state helpers ----------
   * Use with the button/card/nav-link components: default state uses the
   * base tokens above; these cover hover/active/focus/disabled uniformly. */
  --ap-focus-ring: 0 0 0 3px rgba(249, 115, 22, .5);
  --ap-disabled-opacity: 0.5;
}

/* ---------- Dark mode: system preference ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ap-primary: #fb923c;        /* orange-400 — brighter for dark surfaces */
    --ap-primary-hover: #fdba74;  /* orange-300 */
    --ap-primary-active: #f97316; /* orange-500 */
    --ap-secondary: #f87171;      /* red-400 */
    --ap-accent: #facc15;         /* yellow-400 */

    --ap-bg: #0a0a0a;
    --ap-surface: #171717;
    --ap-surface-alt: #262626;
    --ap-border: #404040;

    --ap-text: #f5f5f5;
    --ap-text-muted: #a3a3a3;     /* ~6.4:1 on --ap-surface */
    --ap-text-inverse: #0a0a0a;

    --ap-success: #4ade80;
    --ap-warning: #fbbf24;
    --ap-error: #f87171;

    --ap-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .6);
    --ap-focus-ring: 0 0 0 3px rgba(251, 146, 60, .55);
  }
}

/* ---------- Manual theme toggle overrides ----------
 * The header theme toggle sets data-theme on <html> and persists the
 * choice in localStorage; these win over the OS-level media query in
 * either direction. */
:root[data-theme="dark"] {
  --ap-primary: #fb923c;
  --ap-primary-hover: #fdba74;
  --ap-primary-active: #f97316;
  --ap-secondary: #f87171;
  --ap-accent: #facc15;

  --ap-bg: #0a0a0a;
  --ap-surface: #171717;
  --ap-surface-alt: #262626;
  --ap-border: #404040;

  --ap-text: #f5f5f5;
  --ap-text-muted: #a3a3a3;
  --ap-text-inverse: #0a0a0a;

  --ap-success: #4ade80;
  --ap-warning: #fbbf24;
  --ap-error: #f87171;

  --ap-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .6);
  --ap-focus-ring: 0 0 0 3px rgba(251, 146, 60, .55);
}

:root[data-theme="light"] {
  --ap-primary: #f97316;
  --ap-primary-hover: #ea580c;
  --ap-primary-active: #c2410c;
  --ap-secondary: #dc2626;
  --ap-accent: #ca8a04;

  --ap-bg: #fafaf9;
  --ap-surface: #ffffff;
  --ap-surface-alt: #f5f5f4;
  --ap-border: #e7e5e4;

  --ap-text: #1c1917;
  --ap-text-muted: #57534e;
  --ap-text-inverse: #ffffff;

  --ap-success: #16a34a;
  --ap-warning: #b45309;
  --ap-error: #dc2626;

  --ap-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
  --ap-focus-ring: 0 0 0 3px rgba(249, 115, 22, .5);
}