/* ==========================================================================
   Á CHÂU ELECTRIC — BRAND DESIGN SYSTEM
   01 · DESIGN TOKENS  +  RESET / BASE
   Phase 3 · dark-first industrial engineering
   --------------------------------------------------------------------------
   LOCKED CORE IDENTITY (never change without the owner):
     --ae-blue   #044CFC   Electric Blue   (measured in LOGO.jpg)
     --ae-orange #FC7C04   Energy Orange   (measured in LOGO.jpg)
     --ae-gold   #FC9C04   Energy Gold     (measured in LOGO.jpg)
     --ae-white  #F8F8F8   White           (measured in LOGO.jpg)
     --ae-dark   #0F0F0F   Near black      (logo plate family)
   Everything else is a neutral derivative of those five values only.
   ========================================================================== */

/* 1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- 1.1 core identity (LOCKED) --- */
  --ae-blue: #044cfc;
  --ae-orange: #fc7c04;
  --ae-gold: #fc9c04;
  --ae-white: #f8f8f8;
  --ae-dark: #0f0f0f;

  /* --- 1.2 neutral derivatives of the dark token --- */
  --ae-dark-1: #141414;
  --ae-dark-2: #1a1a1a;
  --ae-dark-3: #222222;
  --ae-dark-4: #2c2c2c;
  --ae-gray-1: #8a8f98; /* muted text on dark — 5.7:1 on --ae-dark */
  --ae-gray-2: #b7bcc4; /* secondary text on dark */
  --ae-gray-3: #e2e4e8; /* primary text on dark */
  --ae-line: rgba(248, 248, 248, 0.1);
  --ae-line-strong: rgba(248, 248, 248, 0.2);

  /* --- 1.3 brand derivatives (tints / shades of the 5 locked values) --- */
  --ae-blue-dark: #0339bd;
  --ae-blue-soft: rgba(4, 76, 252, 0.14);
  --ae-orange-soft: rgba(252, 124, 4, 0.14);
  --ae-gold-soft: rgba(252, 156, 4, 0.12);
  --ae-on-orange: #0f0f0f; /* dark text on orange = 7.2:1  */
  --ae-on-gold: #0f0f0f; /* dark text on gold   = 8.9:1  */
  --ae-on-blue: #f8f8f8; /* white on blue       = 5.4:1  */
  --ae-logo-plate: #181818; /* measured modal plate colour of LOGO.jpg */

  /* --- 1.4 semantic aliases --- */
  --ae-bg: var(--ae-dark);
  --ae-surface: var(--ae-dark-2);
  --ae-surface-2: var(--ae-dark-3);
  --ae-text: var(--ae-white);
  --ae-text-muted: var(--ae-gray-2);
  --ae-text-dim: var(--ae-gray-1);
  --ae-accent: var(--ae-orange);
  --ae-primary: var(--ae-blue);

  /* --- 1.5 typography --- */
  --ae-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ae-fs-h1: clamp(1.9rem, 1.15rem + 3.3vw, 3.6rem);
  --ae-fs-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem);
  --ae-fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --ae-fs-h4: 1.0625rem;
  --ae-fs-body: 1.0625rem;
  --ae-fs-small: 0.9375rem;
  --ae-fs-caption: 0.8125rem;
  --ae-lh-tight: 1.12;
  --ae-lh-body: 1.7;
  --ae-ls-wide: 0.08em;

  /* --- 1.6 space / layout --- */
  --ae-space-1: 4px;
  --ae-space-2: 8px;
  --ae-space-3: 12px;
  --ae-space-4: 16px;
  --ae-space-5: 24px;
  --ae-space-6: 32px;
  --ae-space-7: 48px;
  --ae-space-8: 64px;
  --ae-space-9: 88px;
  --ae-container: 1240px;
  --ae-container-narrow: 900px;
  --ae-gutter: clamp(16px, 3.2vw, 32px);
  --ae-radius-sm: 4px;
  --ae-radius: 8px;
  --ae-radius-lg: 14px;
  --ae-header-h: 94px;
  --ae-accent-bar: 3px;
  --ae-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ae-shadow-2: 0 18px 40px -20px rgba(0, 0, 0, 0.75);
  --ae-shadow-3: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  --ae-z-header: 900;
  --ae-z-drawer: 1000;
  --ae-transition: 180ms ease;
}

@media (max-width: 1023px) {
  :root {
    --ae-header-h: 68px;
    --ae-accent-bar: 2px;
  }
}

/* 2. RESET / BASE
   ========================================================================== */
.ae-header,
.ae-footer,
.ae-home {
  box-sizing: border-box;
}
.ae-header *,
.ae-header *::before,
.ae-header *::after,
.ae-footer *,
.ae-footer *::before,
.ae-footer *::after,
.ae-home *,
.ae-home *::before,
.ae-home *::after {
  box-sizing: border-box;
}

/* Horizontal overflow guard. `clip` (not `hidden`) keeps position:sticky working. */
html,
body {
  overflow-x: clip;
}
#wrapper {
  overflow-x: clip;
}

/* Brand surfaces */
.ae-header,
.ae-footer,
.ae-dark-surface {
  background-color: var(--ae-dark);
  color: var(--ae-text);
  font-family: var(--ae-font);
}

/* Focus visibility — never removed, only restyled */
.ae-header a:focus-visible,
.ae-footer a:focus-visible,
.ae-home a:focus-visible,
.ae-home button:focus-visible {
  outline: 3px solid var(--ae-gold);
  outline-offset: 2px;
  border-radius: var(--ae-radius-sm);
}

/* Skip link (kept from the parent theme, restyled for the dark header) */
.ae-header ~ * .skip-link:focus,
.skip-link:focus {
  position: absolute;
  left: var(--ae-space-4);
  top: var(--ae-space-4);
  z-index: calc(var(--ae-z-drawer) + 10);
  background: var(--ae-white);
  color: var(--ae-dark);
  padding: var(--ae-space-3) var(--ae-space-4);
  border-radius: var(--ae-radius-sm);
}