/* cogitator/variables.css v4 */
/* All design tokens. Import first. */

/* DevAgent24 - 2026-07-16
   What: v4 — Deleted --faction-tyranids and --faction-astartes. Their only
         consumers were the .ds--/.dsv-- token classes removed in
         army-builder-col2.css v76 and army-view-col2.css v9; a repo-wide grep
         (Jérôme, 2026-07-16) confirmed no other reference anywhere in
         /cogitator. Faction accents now come exclusively from
         factions.accent_color via GET /api/v1/codex/factions.
         RETAINED: --tyranids / --tyranids-light — still consumed by
         army.css:1804 (.unit-card__pill--faction). --astartes /
         --astartes-light have no consumers but are kept as the matched half of
         that pair; both are out of this session's scope.
   Why:  Faction colour must be a DB value, never a static token. Leaving dead
         hex here invites it being wired back up. */

/* DevAgent2 - 2026-05-26
   What: Added faction accent vars at spec-exact values, army card custom property,
         and form/select background helpers for the Create Army flow
   Why: Army Picker and Create Army components need these tokens */

/* ============================================================
   COLOR PALETTE — GW Datasheet aesthetic
   Light parchment background, dark text, strong header banners
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR PALETTE — GW Datasheet aesthetic
     Light parchment background, dark text, strong header banners
     ---------------------------------------------------------- */

  --bg:           #f2efe9;   /* warm parchment — app background */
  --surface:      #ffffff;   /* cards, panels */
  --surface-lo:   #e8e4dd;   /* recessed surface, zebra rows */
  --border:       #c8c2b8;   /* borders, dividers */
  --border-hi:    #8a8078;   /* stronger borders, focused states */

  --text:         #1e1c1a;   /* body text — near black */
  --text-dim:     #6b6560;   /* secondary / placeholder text */
  --text-hi:      #0a0908;   /* headings, maximum contrast */
  --text-inv:     #ffffff;   /* text on dark banner backgrounds */

  /* Banner / header fills — GW section header style */
  --banner:       #1a1a1a;   /* dark charcoal — primary section headers */
  --banner-text:  #ffffff;

  /* Primary interactive accent */
  --amber:        #c8860a;   /* amber — buttons, links, highlights */
  --amber-dim:    #a06a06;   /* amber hover / pressed */
  --amber-glow:   rgba(200, 134, 10, 0.15);
  --amber-light:  #fdf3e0;   /* amber tint background */

  /* Status colours */
  --red:          #8b1a1a;   /* errors, destructive, Chaos accent */
  --red-dim:      #6b1212;
  --red-glow:     rgba(139, 26, 26, 0.12);
  --red-light:    #fdf0f0;

  --green:        #1a5c2e;   /* success states */
  --green-glow:   rgba(26, 92, 46, 0.12);
  --green-light:  #f0faf3;

  /* Faction accents — v2 values (preserved for existing use) */
  --tyranids:       #5a1f6b;   /* deep tyranid purple */
  --tyranids-light: #f5eef8;
  --astartes:       #1a3a5c;   /* deep astartes blue */
  --astartes-light: #eef2f8;

  /* DevAgent24 - 2026-07-16: --faction-tyranids (#7B2D8B) and --faction-astartes
     (#1E3A5F) DELETED. Faction accent colours are DB values read from
     factions.accent_color via GET /api/v1/codex/factions — there is no static
     faction colour token, and none should be added here. Adding or recolouring
     a faction is a data-only change. */

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  /* Big Shoulders Display: closest free match to GW's condensed bold */
  --font-heading:  'Big Shoulders Display', 'Arial Narrow', Arial, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.75rem;     /* 44px */
  --text-4xl:  3.5rem;      /* 56px */

  /* Heading defaults */
  --heading-weight:    800;
  --heading-tracking:  0.04em;
  --heading-transform: uppercase;

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */

  --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 */

  /* ----------------------------------------------------------
     BORDERS + RADIUS
     ---------------------------------------------------------- */

  --radius-sm:  2px;
  --radius:     4px;
  --radius-lg:  8px;
  --radius-xl:  12px;

  --border-width: 1px;

  /* ----------------------------------------------------------
     SHADOWS — lighter for a light theme
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow:     0 4px 12px rgba(0, 0, 0, 0.14);
  --shadow-lg:  0 8px 28px rgba(0, 0, 0, 0.18);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --transition-fast:   120ms ease;
  --transition:        200ms ease;
  --transition-slow:   350ms ease;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-base:    0;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --app-max-width: 1400px;
  --header-height: 52px;

  /* Touch target minimum */
  --touch-target: 44px;
}