/* BellerCreatives design tokens. Load before component and page CSS. */
:root {
  color-scheme: light;

  --bc-color-bg: #ffffff;
  --bc-color-bg-alt: #f5f7fa;
  --bc-color-bg-subtle: #f8f6f0;
  --bc-color-surface: #ffffff;
  --bc-color-surface-raised: #ffffff;
  --bc-color-surface-inset: #f8f6f0;
  --bc-color-border: #e5e2dd;
  --bc-color-border-strong: #cfc7bb;
  --bc-color-text: #1a1a2e;
  --bc-color-text-muted: #61687a;
  --bc-color-text-subtle: #7f8797;
  --bc-color-inverse: #ffffff;
  --bc-color-accent: #315f72;
  --bc-color-accent-hover: #244b5b;
  --bc-color-accent-soft: rgba(49, 95, 114, 0.1);
  --bc-color-accent-muted: rgba(49, 95, 114, 0.18);
  --bc-color-accent-ring: rgba(49, 95, 114, 0.28);
  --bc-color-success: #10b981;
  --bc-color-success-soft: rgba(16, 185, 129, 0.12);
  --bc-color-warning: #f59e0b;
  --bc-color-warning-soft: rgba(245, 158, 11, 0.14);
  --bc-color-danger: #ef4444;
  --bc-color-danger-soft: rgba(239, 68, 68, 0.12);
  --bc-color-info: #2563eb;
  --bc-color-info-soft: rgba(37, 99, 235, 0.12);
  --bc-color-overlay: rgba(10, 10, 15, 0.68);

  --bc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bc-font-serif: Georgia, "Times New Roman", serif;
  --bc-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --bc-font-size-0: 0.72rem;
  --bc-font-size-1: 0.82rem;
  --bc-font-size-2: 0.9rem;
  --bc-font-size-3: 1rem;
  --bc-font-size-4: 1.15rem;
  --bc-font-size-5: 1.45rem;
  --bc-font-size-6: 2rem;
  --bc-line-tight: 1.2;
  --bc-line-base: 1.55;
  --bc-line-relaxed: 1.75;
  --bc-letter-caps: 0.06em;

  --bc-space-0: 0;
  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.25rem;
  --bc-space-6: 1.5rem;
  --bc-space-7: 2rem;
  --bc-space-8: 2.5rem;
  --bc-space-9: 3rem;
  --bc-space-10: 4rem;
  --bc-space-11: 5rem;
  --bc-space-12: 6rem;

  --bc-radius-0: 0;
  --bc-radius-1: 0.25rem;
  --bc-radius-2: 0.375rem;
  --bc-radius-3: 0.5rem;
  --bc-radius-4: 0.75rem;
  --bc-radius-5: 1rem;
  --bc-radius-pill: 9999px;
  --bc-radius-round: 50%;

  --bc-shadow-xs: 0 1px 2px rgba(23, 20, 33, 0.06);
  --bc-shadow-sm: 0 4px 12px rgba(23, 20, 33, 0.08);
  --bc-shadow-md: 0 12px 28px rgba(23, 20, 33, 0.12);
  --bc-shadow-lg: 0 22px 56px rgba(23, 20, 33, 0.16);
  --bc-shadow-focus: 0 0 0 4px var(--bc-color-accent-ring);

  --bc-duration-fast: 120ms;
  --bc-duration-base: 180ms;
  --bc-duration-slow: 320ms;
  --bc-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --bc-z-base: 1;
  --bc-z-header: 100;
  --bc-z-sticky: 150;
  --bc-z-overlay: 700;
  --bc-z-modal: 800;
  --bc-z-toast: 900;
  --bc-z-skip: 1000;

  --bc-layout-xs: 34rem;
  --bc-layout-sm: 45rem;
  --bc-layout-md: 58rem;
  --bc-layout-lg: 70rem;
  --bc-layout-xl: 80rem;
  --bc-topbar-height: 3.5rem;
  --bc-control-height: 2.5rem;
  --bc-control-height-sm: 2rem;
  --bc-control-height-lg: 3rem;
  --bc-border-width: 1px;
  --bc-border-width-strong: 2px;

  --bc-gradient-hero: linear-gradient(180deg, var(--bc-color-accent-soft), transparent);
  --bc-gradient-cta: radial-gradient(ellipse at 50% 100%, var(--bc-color-accent-muted), transparent 70%);

  /* Legacy aliases used by older BellerCreatives pages while migration finishes. */
  --bc-accent: var(--bc-color-accent);
  --bc-accent-hover: var(--bc-color-accent-hover);
  --bc-accent-light: var(--bc-color-accent-soft);
  --bc-accent-glow: var(--bc-color-accent-ring);
  --bc-bg: var(--bc-color-bg);
  --bc-bg-alt: var(--bc-color-bg-alt);
  --bc-border: var(--bc-color-border);
  --bc-text: var(--bc-color-text);
  --bc-text-muted: var(--bc-color-text-muted);
  --bc-success: var(--bc-color-success);
  --bc-warning: var(--bc-color-warning);
  --bc-error: var(--bc-color-danger);
  --bc-radius: var(--bc-radius-3);
  --bc-shadow: var(--bc-shadow-sm);
  --bg: var(--bc-color-bg);
  --bg-alt: var(--bc-color-bg-alt);
  --bg-card: var(--bc-color-surface);
  --border: var(--bc-color-border);
  --text: var(--bc-color-text);
  --text-muted: var(--bc-color-text-muted);
  --accent: var(--bc-color-accent);
  --accent-hover: var(--bc-color-accent-hover);
  --accent-glow: var(--bc-color-accent-soft);
  --success: var(--bc-color-success);
  --font: var(--bc-font-sans);
}

/* Light-mode override — applied by bc-theme-toggle.js when user selects light */
body.light-mode {
  color-scheme: light;
  --bc-color-bg: #ffffff;
  --bc-color-bg-alt: #f7f5fb;
  --bc-color-bg-subtle: #f2eff8;
  --bc-color-surface: #ffffff;
  --bc-color-surface-raised: #ffffff;
  --bc-color-surface-inset: #f8f7fc;
  --bc-color-border: #e4e0ec;
  --bc-color-border-strong: #cbc3da;
  --bc-color-text: #171421;
  --bc-color-text-muted: #665f73;
  --bc-color-text-subtle: #8d849c;
  --bc-color-inverse: #ffffff;
  --bc-color-accent-soft: rgba(49, 95, 114, 0.10);
  --bc-color-accent-muted: rgba(49, 95, 114, 0.18);
  --bc-color-accent-ring: rgba(49, 95, 114, 0.28);
  --bc-color-overlay: rgba(10, 10, 15, 0.68);
  --bc-shadow-xs: 0 1px 2px rgba(23, 20, 33, 0.06);
  --bc-shadow-sm: 0 4px 12px rgba(23, 20, 33, 0.08);
  --bc-shadow-md: 0 12px 28px rgba(23, 20, 33, 0.12);
  --bc-shadow-lg: 0 22px 56px rgba(23, 20, 33, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bc-color-bg: #0a0a0f;
    --bc-color-bg-alt: #101018;
    --bc-color-bg-subtle: #171522;
    --bc-color-surface: #12111a;
    --bc-color-surface-raised: #181624;
    --bc-color-surface-inset: #0f0e16;
    --bc-color-border: #2a2638;
    --bc-color-border-strong: #433a59;
    --bc-color-text: #f5f2ff;
    --bc-color-text-muted: #b6aec8;
    --bc-color-text-subtle: #8d849c;
    --bc-color-inverse: #0a0a0f;
    --bc-color-accent-soft: rgba(49, 95, 114, 0.16);
    --bc-color-accent-muted: rgba(49, 95, 114, 0.26);
    --bc-color-accent-ring: rgba(49, 95, 114, 0.36);
    --bc-color-overlay: rgba(0, 0, 0, 0.76);
    --bc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --bc-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
    --bc-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.34);
    --bc-shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.42);
    --bc-gradient-hero: linear-gradient(180deg, var(--bc-color-accent-soft), transparent);
    --bc-gradient-cta: radial-gradient(ellipse at 50% 100%, var(--bc-color-accent-muted), transparent 70%);
  }
}