/* ============================================================
   BATTLEFIELD ESSENTIALS — DESIGN TOKENS
   Ported from the Claude Design handoff ("Sleek Tactical").
   All tokens are exposed as CSS custom properties so they can be
   consumed by the theme, the block editor, and WooCommerce alike.

   SPACING is mapped to Google's Material 8dp grid:
   every step is a multiple of 8 (with a 4dp half-step for fine work).
   The original handoff used ad-hoc rem/clamp values; the table below
   shows how each was snapped to the nearest 8dp increment.

     handoff value        -> 8dp grid token
     -------------------------------------------------
     1.25rem (20px)       -> --space-2  (16dp)   pad-x min
     6rem    (96px)       -> --space-12 (96dp)   pad-x max
     3.5rem  (56px)       -> --space-7  (56dp)   section min  (already on-grid)
     7rem    (112px)      -> --space-14 (112dp)  section max  (already on-grid)
     1rem    (16px)       -> --space-2  (16dp)   grid gap
     1.6rem  (~26px)      -> --space-3  (24dp)   grid gap max
     2.5rem  (40px)       -> --space-5  (40dp)   footer gap
     ============================================================ */

:root {
  /* ---- surfaces — design system v1.0 blacks ---- */
  --bg-0:#0E0F10;
  --bg-1:#141517;
  --bg-2:#1A1B1E;
  --bg-3:#242628;
  --bg-4:#2E3134;

  /* ---- gold accent system (intensity-tunable) ---- */
  --gold:#CC9029;
  --gold-bright:#E6A835;
  --gold-deep:#996B1F;
  --gold-glow:rgba(204,144,41,.22);
  --gold-soft:rgba(204,144,41,.12);

  /* ---- ink ---- */
  --ink:#F5F4F0;
  --ink-dim:#BDBAB2;
  --ink-faint:#6B6962;

  /* ---- lines ---- */
  --line:#242628;
  --line-strong:rgba(255,255,255,.16);
  --line-gold:rgba(204,144,41,.3);

  /* ---- status ---- */
  --stock:#8fae3e;
  --stock-soft:rgba(143,174,62,.12);
  --danger:#d4593f;

  /* ---- themeable scrims & textures (overridden in light) ---- */
  --header-scroll:rgba(14,15,16,.86);
  --bar-bg:rgba(20,21,23,.96);
  --shadow-strong:rgba(0,0,0,.8);
  --shadow-soft:rgba(0,0,0,.5);
  --overlay:rgba(0,0,0,.62);
  --texture-line:rgba(255,255,255,.018);
  --watermark:rgba(255,255,255,.018);

  /* ---- type families (design system v1.0) ---- */
  --font-display:'Bebas Neue', sans-serif;
  --font-heading:'Oswald', sans-serif;
  --font-accent:'Rajdhani', sans-serif;
  --font-body:'Inter', sans-serif;

  /* ---- fluid type scale (viewport-responsive, intentionally non-grid) ---- */
  --fs-display:clamp(3.4rem, 9vw, 8.5rem);
  --fs-h1:clamp(2.6rem, 6vw, 5rem);
  --fs-h2:clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3:clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-lead:clamp(1rem, 1.4vw, 1.25rem);
  --fs-body:clamp(.95rem, 1.05vw, 1.05rem);
  --fs-label:clamp(.72rem, .9vw, .8rem);

  /* ============================================================
     8dp GRID — Material spacing scale (1 unit = 8dp)
     ============================================================ */
  --grid-unit:8px;
  --space-0:0;
  --space-0-5:4px;    /* 0.5 unit — fine half-step */
  --space-1:8px;      /* 1  */
  --space-2:16px;     /* 2  */
  --space-3:24px;     /* 3  */
  --space-4:32px;     /* 4  */
  --space-5:40px;     /* 5  */
  --space-6:48px;     /* 6  */
  --space-7:56px;     /* 7  */
  --space-8:64px;     /* 8  */
  --space-9:72px;     /* 9  */
  --space-10:80px;    /* 10 */
  --space-12:96px;    /* 12 */
  --space-14:112px;   /* 14 */
  --space-16:128px;   /* 16 */
  --space-20:160px;   /* 20 */

  /* ---- rhythm tokens, snapped to the 8dp grid endpoints ---- */
  --pad-x:clamp(var(--space-2), 5vw, var(--space-12));      /* 16 -> 96 */
  --section-y:clamp(var(--space-7), 8vw, var(--space-14));  /* 56 -> 112 */
  --gap-grid:clamp(var(--space-2), 2vw, var(--space-3));    /* 16 -> 24 */
  --gap-tight:var(--space-1);
  --gap-loose:var(--space-5);

  /* ---- geometry / motion ---- */
  --radius:3px;
  --notch:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1480px;
}

/* accent intensity variants (driven by the front-end theme toggle) */
[data-accent="bold"]   { --gold-glow:rgba(204,144,41,.38); --gold-soft:rgba(204,144,41,.2);  --line-gold:rgba(204,144,41,.5); }
[data-accent="subtle"] { --gold-glow:rgba(204,144,41,.12); --gold-soft:rgba(204,144,41,.06); --line-gold:rgba(204,144,41,.2); }

/* ===== LIGHT THEME — warm tactical paper ===== */
[data-theme="light"] {
  --bg-0:#f3f0e8;
  --bg-1:#ece8de;
  --bg-2:#e4dfd2;
  --bg-3:#dad4c5;
  --bg-4:#cbc4b1;

  /* deepen gold so it holds contrast on light surfaces */
  --gold:#b27c1d;
  --gold-bright:#9a6913;
  --gold-deep:#caa24a;
  --gold-glow:rgba(178,124,29,.24);
  --gold-soft:rgba(178,124,29,.13);

  --ink:#191c1a;
  --ink-dim:#54574e;
  --ink-faint:#878a7e;

  --line:rgba(20,24,18,.12);
  --line-strong:rgba(20,24,18,.2);
  --line-gold:rgba(178,124,29,.4);

  --header-scroll:rgba(243,240,232,.84);
  --bar-bg:rgba(236,232,222,.96);
  --shadow-strong:rgba(60,52,30,.28);
  --shadow-soft:rgba(60,52,30,.16);
  --overlay:rgba(30,26,16,.42);
  --texture-line:rgba(20,24,18,.028);
  --watermark:rgba(20,24,18,.035);
  --stock-soft:rgba(110,134,44,.16);
}
[data-theme="light"][data-accent="bold"]   { --gold-glow:rgba(178,124,29,.4);  --gold-soft:rgba(178,124,29,.22); --line-gold:rgba(178,124,29,.55); }
[data-theme="light"][data-accent="subtle"] { --gold-glow:rgba(178,124,29,.13); --gold-soft:rgba(178,124,29,.07); --line-gold:rgba(178,124,29,.24); }