:root {
  /* ===== BRAND COLORS (from designer's system) ===== */

  /* Primary — Orange */
  --color-primary:        #ff634a;
  --color-primary-light:  #ffdddb;
  --color-primary-hover:  #ffa59d;
  --color-primary-dark:   #962500;
  --color-primary-active: #d43800;

  /* Accent — Pink */
  --color-accent:       #ff4a8b;
  --color-accent-light: #ffd3dd;
  --color-accent-dark:  #d40067;

  /* Secondary — Green */
  --color-secondary:       #00d598;
  --color-secondary-light: #4affbd;
  --color-secondary-dark:  #00593e;

  /* Tertiary — Blue */
  --color-tertiary:       #4a8cff;
  --color-tertiary-light: #d1dcff;
  --color-tertiary-dark:  #004694;

  /* Purple */
  --color-purple:      #9293e2;
  --color-purple-dark: #3f42be;

  /* Yellow */
  --color-yellow:       #ffbe4a;
  --color-yellow-light: #ffeedd;

  /* ===== NEUTRALS ===== */
  --color-text:          #131010;
  --color-text-muted:    #9f9493;
  --color-surface-muted: #e6e4e4;
  --color-white:         #ffffff;

  /* Gray scale — mapped from designer's 3-value neutrals */
  --color-gray-100: #e6e4e4;
  --color-gray-200: #d4d0d0;
  --color-gray-300: #b8b2b1;
  --color-gray-400: #9f9493;
  --color-gray-500: #7a706f;
  --color-gray-600: #4a4241;
  --color-gray-700: #131010;

  /* Warm dark variants — used by .hero-bg-warm to separate CTA from footer */
  --color-text-warm:     #1a1210;
  --color-text-warm-mid: #2a1815;

  /* ===== TYPOGRAPHY =====
     The designer's brand uses Hanken Grotesk for both headings and body.
     --font-display and --font-body intentionally point to the same family.
     If a separate display face is ever introduced, both tokens must be
     updated together — keep the split so the semantic intent stays clear. */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Font sizes — --text-2xs reserved for designer's mono detail labels;
     --text-xs and up are body-readable (≥12px) per WCAG */
  --text-2xs:  0.625rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ===== SPACING ===== */
  --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-28: 7rem;

  /* ===== LAYOUT ===== */
  --container-max: 1280px;
  --container-padding: var(--space-4);

  /* ===== BORDERS ===== */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ===== ADMIN SEMANTIC TOKENS ===== */
  --admin-sidebar-width: 220px;
  --admin-sidebar-collapsed: 60px;
  --admin-sidebar-bg: var(--color-text);
  --admin-sidebar-text: var(--color-gray-300);
  --admin-sidebar-active: var(--color-white);
  --admin-sidebar-active-indicator: var(--admin-accent);
  --admin-sidebar-section-label: var(--color-gray-400);

  --admin-body-bg: var(--color-gray-100);
  --admin-text-primary: var(--color-text);
  --admin-text-secondary: var(--color-gray-500);

  --admin-surface: var(--color-white);
  --admin-surface-alt: var(--color-gray-100);
  --admin-surface-hover: rgba(255, 99, 74, 0.05);
  --admin-border: var(--color-gray-200);
  --admin-border-strong: var(--color-gray-300);
  --admin-text-placeholder: var(--color-gray-400);
  --admin-text-on-primary: var(--color-white);
  --admin-text-on-dark: var(--color-white);
  --admin-table-header-bg: var(--color-gray-600);
  --admin-table-header-text: var(--color-white);
  --admin-badge-neutral-bg: var(--color-gray-100);
  --admin-badge-neutral-text: var(--color-gray-600);
  --admin-toggle-bg: var(--color-gray-300);
  --admin-toggle-knob: var(--color-white);
  --admin-shadow-sm: var(--shadow-sm);
  --admin-shadow-md: var(--shadow-md);

  --admin-success-bg: #D1FAE5;
  --admin-success-border: #6EE7B7;
  --admin-success-text: #065F46;
  --admin-danger-bg: #FEE2E2;
  --admin-danger-border: #FCA5A5;
  --admin-danger-text: #991B1B;

  --admin-accent: #d43800;
  --admin-accent-hover: #b83000;
  --admin-accent-text: #ffffff;

  --admin-warning-bg: #FEF3C7;
  --admin-warning-border: #FCD34D;
  --admin-warning-text: #92400E;
}

/* ===== ADMIN DARK MODE =====
   Overrides admin semantic tokens when data-theme="dark" is set on <html>.
   The admin layout sets this attribute server-side from the user's saved
   preference (cached in a cookie to avoid flash of wrong theme).

   Only admin-scoped tokens are overridden here — generic tokens like
   --color-white and --color-gray-* are never touched, so the public
   site is unaffected regardless of OS preference or cookie state.

   A @media (prefers-color-scheme: dark) block was intentionally NOT
   added here. Such a block would need to override generic tokens to
   work before JS runs, which leaks dark styles into the public site
   (the bug this refactor fixed). The trade-off is a brief flash of
   light theme on the very first admin visit for OS-dark users, before
   the Stimulus connect() callback sets data-theme. Subsequent visits
   are covered by the cookie. */
[data-theme="dark"] {
  --admin-body-bg: #1a1515;
  --admin-text-primary: #e6e4e4;
  --admin-text-secondary: #9f9493;

  --admin-sidebar-bg: #151010;
  --admin-sidebar-text: #9f9493;
  --admin-sidebar-section-label: #9f9493;

  --admin-surface: #231e1e;
  --admin-surface-alt: #2d2626;
  --admin-surface-hover: rgba(255, 99, 74, 0.08);
  --admin-border: #3d3535;
  --admin-border-strong: #4a4141;
  --admin-text-placeholder: #7a706f;
  --admin-table-header-bg: #332c2c;
  --admin-table-header-text: #e6e4e4;
  --admin-badge-neutral-bg: #2d2626;
  --admin-badge-neutral-text: #9f9493;
  --admin-toggle-bg: #4a4141;
  --admin-toggle-knob: #e6e4e4;
  --admin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --admin-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

  --admin-success-bg: #064e3b;
  --admin-success-border: #065f46;
  --admin-success-text: #6ee7b7;
  --admin-danger-bg: #7f1d1d;
  --admin-danger-border: #991b1b;
  --admin-danger-text: #fca5a5;

  --admin-accent: #e84d33;
  --admin-accent-hover: #ff634a;
  --admin-accent-text: #ffffff;

  --admin-warning-bg: #78350F;
  --admin-warning-border: #92400E;
  --admin-warning-text: #FCD34D;
}