/**
 * Base: reset, design tokens, typography, accessibility.
 * No layout. Brand-owned public design system.
 */

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ===== DESIGN TOKENS (:root) ===== */
:root {
  /* Colors (semantic + legacy for migration) */
  --color-primary: #001C82;
  --color-secondary: #0D58FF;
  --color-accent: #2563eb;
  --color-background: #0C0C1F;
  /* CTA: single card background (contact-section-inner + contact-cta-box same), and deeper panel for service sections only */
  --color-surface: #18182b;
  --color-surface-deep: #161A28;
  /* Secondary CTA button: solid dark (not semi-transparent) */
  --color-cta-secondary-bg: #2d2e46;
  --color-text-primary: #EAF4FF;
  --color-text-muted: #CFE3FF;
  --color-border: rgba(37, 99, 235, 0.12);
  --color-border-strong: rgba(37, 99, 235, 0.18);
  --color-success: #00ff88;
  --color-warning: #ffaa00;
  --color-error: #ff4444;

  /* Danger & action buttons */
  --color-danger: #D32F2F;
  --color-danger-hover: #B71C1C;
  --color-premium-red: #C62828;
  --color-premium-red-hover: #B71C1C;
  --color-orange-dark: #E65100;
  --color-orange-dark-hover: #BF360C;
  --color-orange-light: #EF6C00;
  --color-orange-light-hover: #E65100;
  --color-green: #BFF747;
  --color-green-hover: #A5D936;
  --color-green-text: #1a1a1a;

  /* Legacy names (same values, for app.css/nav.css during migration) */
  --bg-900: var(--color-background);
  --bg-800: #12122a;
  --fg: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --blue-900: var(--color-primary);
  --blue-500: var(--color-secondary);
  --cta: var(--color-accent);
  --cta-rgb: 37, 99, 235;
  --cta-hover: #1d4ed8;
  --cta-on-dark: #93c5fd;
  --ice: #C0FFFF;
  --line1: var(--color-border-strong);
  --line2: var(--color-border);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-backdrop: blur(10px);
  --glass-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
  /* Card/small section (e.g. contact-cta-box, service interior cards): same as contact-cta-box */
  --card-bg: var(--color-background);
  --card-border: var(--line2);
  --r: 20px;
  --gradient: linear-gradient(135deg, #0D58FF, #00E6FF);

  /* Brand palette (raw; dark theme decorative use) */
  --color-1: #3b82f6;
  --color-2: #bc3af2;
  --color-3: #f23a80;
  --color-4: #f29d3a;
  --color-5: #9ff23a;

  /* Text on solid accent (CTA) buttons */
  --color-on-accent: #ffffff;
  /* Soft accent surfaces (e.g. secondary button) — dark UI: light text on tint */
  --color-accent-soft-bg: rgba(var(--cta-rgb), 0.12);
  --color-accent-soft-bg-hover: rgba(var(--cta-rgb), 0.2);
  --color-accent-soft-border: rgba(var(--cta-rgb), 0.28);
  --color-on-accent-soft: #ffffff;
  --focus-ring: var(--color-accent);

  /* Badge / chip (dark surfaces) */
  --badge-bg: rgba(12, 61, 217, 0.18);
  --badge-fg: #99c4ff;
  --badge-border: rgba(13, 88, 255, 0.22);
  /* Utility: dimmed muted (solid enough for AA on dark bg) */
  --muted-50: rgba(207, 227, 255, 0.62);

  /* Spacing scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* Typography */
  --font-family-sans: system-ui, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Gradients (for .bg-gradient-to-r / .bg-gradient-to-br; from/to classes set values) */
  --gradient-stops: transparent;
  --gradient-from: transparent;
  --gradient-via: transparent;
  --gradient-to: transparent;

  /* Breakpoints (for reference in media queries) */
  --bp-xs: 560px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 860px;
  --bp-xl: 980px;
  --bp-2xl: 1024px;
}

/* ===== LIGHT THEME (explicit; default tokens above = dark) ===== */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-800: #e2e8f0;
  /* Accessible accents: blue-700 so white text meets WCAG AA on solid CTAs */
  --color-1: #1d4ed8;
  --color-2: #bc3af2;
  --color-3: #f23a80;
  --color-4: #f29d3a;
  --color-5: #9ff23a;
  --color-primary: #1e3a8a;
  --color-secondary: #2563eb;
  --color-accent: var(--color-1);
  /* Override critical.css --cta:#3b82f6 so solid CTAs meet WCAG AA with white text */
  --cta: var(--color-1);
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-deep: #f1f5f9;
  --color-cta-secondary-bg: #e2e8f0;
  --color-text-primary: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.2);
  --cta-rgb: 29, 78, 216;
  --cta-hover: #1e40af;
  --cta-on-dark: #1e40af;
  --ice: #0369a1;
  --line1: var(--color-border-strong);
  --line2: var(--color-border);
  --glass: rgba(15, 23, 42, 0.06);
  --glass-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  --card-bg: #ffffff;
  --card-border: var(--line2);
  --gradient: linear-gradient(135deg, var(--color-1), #7c3aed);
  --color-on-accent: #ffffff;
  --color-accent-soft-bg: rgba(29, 78, 216, 0.12);
  --color-accent-soft-bg-hover: rgba(29, 78, 216, 0.2);
  --color-accent-soft-border: rgba(29, 78, 216, 0.35);
  --color-on-accent-soft: #1e3a8a;
  --focus-ring: var(--color-1);
  --badge-bg: rgba(29, 78, 216, 0.12);
  --badge-fg: #1e3a8a;
  --badge-border: rgba(29, 78, 216, 0.32);
  /* Success on light surfaces (neon green fails AA on white/#f8fafc) */
  --color-success: #047857;
  /* WCAG-safe semantic text on light backgrounds (avoid root neon warning/error) */
  --color-warning: #b45309;
  --color-error: #b91c1c;
  /* Dimmed secondary text utility (solid, AA on white) */
  --muted-50: #64748b;
}

/* Win over late utilities that hardcode slate-400 for .text-muted */
html[data-theme="light"] .text-muted {
  color: var(--muted) !important;
}

@media (prefers-contrast: more) {
  html[data-theme="light"] {
    --color-border: rgba(15, 23, 42, 0.35);
    --color-border-strong: rgba(15, 23, 42, 0.5);
  }
}

/* ===== BODY ===== */
body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  overflow-x: hidden;
}

/* Legacy class: now uses system stack (Poppins removed per plan) */
.font-poppins {
  font-family: var(--font-family-sans);
}

/* ===== TYPOGRAPHY (base elements) ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

small,
.text-small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: rgba(7, 156, 255, 0.35);
    --color-border-strong: rgba(7, 156, 255, 0.5);
  }
}

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
}

/* ===== GLOBAL LINKS (no underline by default; design tokens for contrast) ===== */
a {
  text-decoration: none;
  color: var(--cta);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cta-hover);
}

a:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
}

/* ===== COOKIE BANNER & PREFERENCES MODAL ===== */
/* Layout + positioning: Views/partials/cookie-settings.php (#cookie-consent-shell). Here: theme surface + links only. */
#cookie-banner {
  background: rgba(12, 12, 31, 0.95) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line2);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/* Cookie preferences modal: styles live in partial cookie-settings.php (inline when banner renders) */

/* Cookie banner links: high contrast on dark bg (WCAG AA); avoids Lighthouse contrast failure */
#cookie-banner .cookie-banner-link {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cookie-banner .cookie-banner-link:hover {
  color: #bfdbfe;
}
#cookie-banner .cookie-banner-link:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

html[data-theme="light"] #cookie-banner {
  background: rgba(248, 250, 252, 0.98) !important;
  border-color: var(--line2);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] #cookie-banner .cookie-banner-link {
  color: #1d4ed8;
}

html[data-theme="light"] #cookie-banner .cookie-banner-link:hover {
  color: #1e40af;
}

html[data-theme="light"] #cookie-banner .cookie-banner-link:focus-visible {
  outline-color: #2563eb;
}

/* Light banner surface (base.css wins over partial #cookie-banner bg): dark text, not partial’s white/slate */
html[data-theme="light"] #cookie-banner .cookie-title {
  color: var(--color-text-primary);
}

html[data-theme="light"] #cookie-banner .cookie-message {
  color: #334155;
}

/* ===== DANGER / ACTION BUTTON UTILITIES ===== */
.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
}
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-premium-red {
  background: var(--color-premium-red);
  color: #ffffff;
}
.btn-premium-red:hover { background: var(--color-premium-red-hover); }
.btn-orange-dark {
  background: var(--color-orange-dark);
  color: #ffffff;
}
.btn-orange-dark:hover { background: var(--color-orange-dark-hover); }
.btn-orange-light {
  background: var(--color-orange-light);
  color: #ffffff;
}
.btn-orange-light:hover { background: var(--color-orange-light-hover); }
.btn-green {
  background: var(--color-green);
  color: var(--color-green-text);
}
.btn-green:hover { background: var(--color-green-hover); }

/* ===== ADMIN EDIT NOTICE (logged-in admins on public views; HtmlCache strips .admin-edit-notice) ===== */
.admin-edit-notice {
  border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--line2));
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

.admin-edit-notice__title {
  margin: 0;
  font-weight: 600;
}

.admin-edit-notice__subtitle {
  margin: 0;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.admin-edit-notice__link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-accent);
  text-decoration: none;
  text-decoration-skip-ink: auto;
}

.admin-edit-notice__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-edit-notice__link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== ICON/SIZE UTILITIES (home, header, SVGs, partials – modern view) ===== */
/* Ensures w-4 h-4 and related classes work from base layer so home and icons render correctly. */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.flex-shrink-0 { flex-shrink: 0; }