/* ==========================================================================
   Apex Cyber - Design Tokens
   Dark-first. Palette validated to WCAG AA/AAA (see README for ratios).
   ========================================================================== */
:root {
  /* --- Surface ramp: near-black with a cool blue undertone, not pure black --- */
  --ac-bg:            #0A0D12;
  --ac-surface:       #12171F;
  --ac-surface-2:     #1A212C;
  --ac-surface-3:     #222B38;

  /* --- Text --- */
  --ac-fg:            #E8EDF5;  /* 16.55:1 on bg - AAA */
  --ac-fg-muted:      #9AA7B8;  /*  7.96:1 on bg - AAA */
  --ac-fg-faint:      #6B7A8D;  /* decorative / non-essential only */

  /* --- Accent: warm amber-orange, drawn from the reference art direction --- */
  --ac-accent:        #F0821E;  /* 7.34:1 on bg - AAA */
  --ac-accent-hi:     #FFA94D;  /* 10.22:1 on bg - hover/light-up */
  --ac-accent-dim:    #B85F12;
  --ac-on-accent:     #0A0D12;  /* 7.34:1 on accent - AAA */

  /* --- Lines --- */
  --ac-border:        #232B38;  /* decorative separators */
  --ac-border-strong: #3D4959;  /* 3:1 vs surface - interactive boundaries */

  /* --- Feedback --- */
  --ac-danger:        #FF6B6B;
  --ac-success:       #4ADE80;

  /* --- Type --- */
  --ac-font-head: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ac-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ac-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --ac-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --ac-step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.35rem);
  --ac-step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --ac-step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --ac-step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.35rem);
  --ac-step-5:  clamp(2.5rem, 1.9rem + 3vw, 4.4rem);

  /* --- Space: 4/8 rhythm --- */
  --ac-sp-1: 0.25rem;  --ac-sp-2: 0.5rem;   --ac-sp-3: 0.75rem;
  --ac-sp-4: 1rem;     --ac-sp-5: 1.5rem;   --ac-sp-6: 2rem;
  --ac-sp-7: 3rem;     --ac-sp-8: 4rem;     --ac-sp-9: 6rem;
  --ac-sp-10: 8rem;

  --ac-section-y: clamp(3.5rem, 2rem + 7vw, 7rem);
  --ac-container: 1200px;
  --ac-gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  --ac-radius-sm: 6px;
  --ac-radius:    10px;
  --ac-radius-lg: 16px;

  /* --- Motion: shared tokens, distance-appropriate --- */
  --ac-dur-fast: 140ms;
  --ac-dur:      240ms;
  --ac-dur-slow: 420ms;
  --ac-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ac-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layering --- */
  --ac-z-base: 1; --ac-z-sticky: 40; --ac-z-nav: 60; --ac-z-overlay: 80; --ac-z-modal: 100;

  color-scheme: dark;
}