/* ==========================================================
   atx-tokens.css
   ATX Youth Media Works — ACSS token layer for the wireframe
   stage. Variable NAMES are real ACSS names (so they port to
   Etch with no translation) but the VALUES here are locked
   neutral/grayscale — wireframes are design-agnostic, never
   the client's brand colors or fonts. See the wireframe skill
   "Design-agnostic, non-negotiable" section.

   Real brand tokens (cyan/yellow, Bebas Neue/Work Sans/Caveat)
   live in Style Guide v2 — do not pull them into wireframes.

   Font: Inter (locked wireframe standard, every project).
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================== */

:root {
  /* --- Primary / Accent — neutral stand-ins only, no client hue --- */
  --color-primary:              #1A1A1A;
  --color-primary-dark:         #000000;
  --color-primary-light:        #4A4A4A;

  --color-accent:               #6B6B6B;
  --color-accent-dark:          #4A4A4A;
  --color-accent-light:         #9A9A9A;

  /* --- Neutrals --- */
  --color-white:                #FFFFFF;
  --color-black:                #1A1A1A;
  --color-bg:                   #F4F4F2;
  --color-bg-alt:                #EDEDEB;
  --color-border:               #D8D8D8;
  --label-bg:                   #E5E5E3;

  /* --- Semantic --- */
  --color-text:                 #1A1A1A;
  --color-text-muted:           #6B6B6B;
  --color-text-light:           rgba(255,255,255,0.85);
  --color-link:                 #1A1A1A;
  --color-link-hover:           #4A4A4A;
  --color-focus:                #4A4A4A;

  /* --- Type --- */
  --font-primary: 'Inter', Arial, Helvetica, sans-serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif;
  --text-h1:   56px;
  --text-h2:   40px;
  --text-h3:   28px;
  --text-h4:   20px;
  --text-body: 16px;
  --text-sm:   14px;
  --text-xs:   12px;

  /* --- Spacing (wireframe px scale, as consumed by inline component CSS) ---
     Production ACSS spacing scale (applied via .pad--/.gap-- utility classes
     at build, not consumed here): --space-xs .5rem / s .75rem / m 1.5rem / l 2rem / xl 3rem / 2xl 4rem */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;

  /* --- Radius --- */
  --radius-button: 4px;
  --radius-input:  4px;

  /* --- Layout (wireframe-specific, not ACSS slots) --- */
  --container-max: 1200px;
  --container-pad: 32px;
}