/**
 * ABI — Aesthetic Branding Institute
 * Design tokens + theme layers
 */

@property --nav-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #1c1c1c;
}

:root {
  color-scheme: light;
  --palette-cream: #f8f7f4;
  --palette-charcoal: #1c1c1c;
  --palette-brand-blue: #2563eb;
  --palette-brand-blue-rgb: 37, 99, 235;

  /* Brand accent — single blue everywhere */
  --color-primary: var(--palette-brand-blue);
  --color-primary-hover: var(--palette-brand-blue);

  --accent-glass-bg: rgba(var(--palette-brand-blue-rgb), 0.78);
  --accent-glass-bg-hover: rgba(var(--palette-brand-blue-rgb), 0.92);
  --accent-glass-border: transparent;
  --accent-glass-shadow: 0 4px 24px rgba(var(--palette-brand-blue-rgb), 0.22);
  --accent-on-glass: var(--palette-cream);

  /* Light theme */
  --color-background: var(--palette-cream);
  --color-secondary: var(--palette-charcoal);
  --color-text: var(--palette-charcoal);
  --color-text-inverse: var(--palette-cream);
  --color-text-muted: rgba(28, 28, 28, 0.6);
  --color-text-on-surface: var(--palette-charcoal);
  --color-text-muted-on-surface: rgba(28, 28, 28, 0.6);
  --color-border: rgba(28, 28, 28, 0.12);

  /* Cards — one tone lighter than page bg + accent border */
  --color-card-bg: #ffffff;
  --color-input-bg: #ffffff;
  --color-card-accent-edge: rgba(var(--palette-brand-blue-rgb), 0.35);

  --color-section-alt-bg: var(--palette-charcoal);
  --color-section-alt-text: var(--palette-cream);
  --color-section-alt-muted: rgba(248, 247, 244, 0.7);

  --color-success: #15803d;
  --color-error: #b91c1c;
  --navbar-scrolled-bg: rgba(248, 247, 244, 0.92);
  --mobile-menu-bg: var(--palette-cream);
  --mobile-menu-text: var(--palette-charcoal);
  --mobile-menu-text-muted: rgba(28, 28, 28, 0.6);
  --mobile-menu-border: rgba(28, 28, 28, 0.12);
  --footer-divider: rgba(248, 247, 244, 0.12);
  --footer-muted: rgba(248, 247, 244, 0.55);
  --footer-link: rgba(248, 247, 244, 0.75);
  --footer-accent-glow:
    0 0 8px rgba(var(--palette-brand-blue-rgb), 0.75),
    0 0 20px rgba(var(--palette-brand-blue-rgb), 0.35);

  /* Hero — fixed appearance (also used when dark theme is active) */
  --hero-muted: rgba(248, 247, 244, 0.55);
  --hero-nav-muted: rgba(248, 247, 244, 0.5);
  --hero-control-bg: rgba(255, 255, 255, 0.12);
  --hero-control-border: rgba(255, 255, 255, 0.25);

  --font-display: "Nunito Sans", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  /* Weights in styles.css use 600/700 where Prompt used 500/600 (Nunito looks lighter at the same number). */

  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --section-padding: clamp(4rem, 10vw, 8rem);
  /* Section nav: JS uses navbar height + label gap; fallback for scroll-padding without JS */
  --anchor-scroll-offset: 5.5rem;
  /* Same gap below navbar for every section after nav jump (JS + scroll-padding).
     Capped by section padding so the previous section never shows under the navbar. */
  --anchor-label-gap: min(2.5rem, var(--section-padding));
  /* Same gutter for every card grid, so card widths match across sections */
  --card-grid-gap: 1.5rem;

  --transition-fast: 0.2s ease;
  --transition-base: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

/* Dark charcoal sections — white glass buttons, brand blue accents */
.process,
.footer,
.hero {
  --accent-glass-bg: rgba(255, 255, 255, 0.14);
  --accent-glass-bg-hover: rgba(255, 255, 255, 0.24);
  --accent-glass-border: transparent;
  --accent-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --accent-on-glass: var(--palette-cream);
}

/* ─── Dark theme (everything except hero) ─────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --color-background: var(--palette-charcoal);
  --color-secondary: var(--palette-charcoal);

  --color-card-bg: #2a2a2a;
  --color-input-bg: #2a2a2a;
  --color-card-accent-edge: rgba(var(--palette-brand-blue-rgb), 0.4);

  --color-text: var(--palette-cream);
  --color-text-inverse: var(--palette-cream);
  --color-text-muted: rgba(248, 247, 244, 0.65);
  --color-text-on-surface: var(--palette-cream);
  --color-text-muted-on-surface: rgba(248, 247, 244, 0.65);
  --color-border: rgba(248, 247, 244, 0.14);

  --color-section-alt-bg: var(--palette-charcoal);
  --color-section-alt-text: var(--palette-cream);
  --color-section-alt-muted: rgba(248, 247, 244, 0.65);

  --color-success: #4ade80;
  --color-error: #f87171;
  --navbar-scrolled-bg: rgba(28, 28, 28, 0.95);
  --mobile-menu-bg: var(--palette-charcoal);
  --mobile-menu-text: var(--palette-cream);
  --mobile-menu-text-muted: rgba(248, 247, 244, 0.65);
  --mobile-menu-border: rgba(248, 247, 244, 0.14);
  --footer-divider: rgba(248, 247, 244, 0.12);
  --footer-muted: rgba(248, 247, 244, 0.55);
  --footer-link: rgba(248, 247, 244, 0.75);
}

/* Hero: identical to light theme when dark mode is on */
[data-theme="dark"] .hero {
  --accent-glass-bg: rgba(255, 255, 255, 0.14);
  --accent-glass-bg-hover: rgba(255, 255, 255, 0.24);
  --accent-glass-border: transparent;
  --accent-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --accent-on-glass: var(--palette-cream);
}

/* Explicit dark surfaces — ensures grey bg + cream text everywhere except hero */
[data-theme="dark"] body {
  background-color: var(--palette-charcoal);
  color: var(--palette-cream);
}

[data-theme="dark"] .section,
[data-theme="dark"] .section--steel {
  background-color: var(--palette-charcoal);
  color: var(--palette-cream);
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .contact-header h2 {
  color: var(--palette-cream);
}

[data-theme="dark"] .section-label,
[data-theme="dark"] .about-description,
[data-theme="dark"] .contact-header .text-muted,
[data-theme="dark"] .contact-details,
[data-theme="dark"] .contact-details a,
[data-theme="dark"] .contact-details span,
[data-theme="dark"] .form-group label {
  color: var(--palette-cream);
}

[data-theme="dark"] .contact-details a:hover {
  color: var(--color-primary);
}

[data-theme="dark"] .form-group input:not([type="checkbox"]),
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .phone-input-group select {
  background: var(--color-input-bg);
  color: var(--palette-cream);
  border-color: var(--color-border);
  color-scheme: dark;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: rgba(248, 247, 244, 0.45);
}

[data-theme="dark"] .form-group select option {
  background: var(--color-input-bg);
  color: var(--palette-cream);
}

[data-theme="dark"] .navbar.scrolled {
  --nav-fg: var(--palette-cream);
  background-color: var(--palette-charcoal);
  border-bottom-color: rgba(248, 247, 244, 0.14);
}

[data-theme="dark"] .navbar.scrolled .navbar-nav a {
  color: var(--hero-nav-muted);
}

[data-theme="dark"] .navbar.scrolled .navbar-nav a:hover,
[data-theme="dark"] .navbar.scrolled .navbar-nav a.active {
  color: var(--palette-cream);
}

[data-theme="dark"] .navbar.scrolled .navbar-nav a.active::after {
  background: var(--color-primary);
}

[data-theme="dark"] .navbar.scrolled .lang-menu__trigger:hover,
[data-theme="dark"] .lang-menu.is-open .lang-menu__trigger {
  color: var(--color-primary);
}