/* ============================================================
   VARIABLES.CSS
   UpLoft PLLC — shared design tokens for all modules
   (antagonist sheets, The Deck, parent orientation)

   This file declares all design tokens.
   Change values here — everything updates everywhere.
   Typography decisions are recorded in TYPOGRAPHY.md.

   LOAD ORDER: variables.css → template.css → print.css
   → module styles → dialect overrides (variables-parent.css)
   ============================================================ */

/* Anton — replaced Bangers 2026-07-30: legible, condensed, holds up
   at headline size unlike Bangers' crowded/inconsistent-stroke hand-
   lettered look. Tested live against Bungee (too wide — ran to the
   mobile viewport edge on "Reconnection, not a fix.") and Archivo
   Black (safe but loses the brand's "real talk" assertiveness)
   before picking this one. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


/* ------------------------------------------------------------
   FONT DECLARATIONS
   Points the browser to your font files in assets/fonts/
   The url() path is relative to THIS css file's location.
   If variables.css is in /css/, fonts are at ../assets/fonts/
   ------------------------------------------------------------ */

/* Bangers — display font (replaced Comic Beacon, which carried
   a built-in drop shadow that doubled the CSS shadow and
   printed blurry) */
@font-face {
  font-family: 'Bangers';
  src: url('../assets/fonts/Bangers-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Nunito — body font (variable font, local files) */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/* Oswald — label font (variable font, local file) */
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
}


/* ------------------------------------------------------------
   FONT ROLE ASSIGNMENTS
   Swap a font family here — not in template.css.
   ------------------------------------------------------------ */

:root {
  --font-display : 'Anton',        sans-serif;          /* Role 1 — titles, big moments   */
  --font-label   : 'Oswald',       sans-serif;          /* Role 2 — band headers, labels  */
  --font-body    : 'Nunito',       sans-serif;          /* Role 3 — body copy             */
}


/* ------------------------------------------------------------
   COLOR TOKENS
   Temporary placeholder palette — full brand palette TBD.
   Every color in the system lives here as a named token.
   ------------------------------------------------------------ */

:root {
  /* Core */
  --ink        : #14110F;   /* primary black — borders, text         */
  --paper      : #F5F1E7;   /* page background                       */
  --bone       : #FBF8F2;   /* panel background (lighter than paper) */

  /* Violet — primary brand / interactive accent */
  --accent     : #5B4B8A;
  --accent-dk  : #3D3160;
  --accent-lt  : #E8E3F5;

  /* Forest green — secondary accent */
  --brand-green    : #3B6B45;
  --brand-green-dk : #274A2E;
  --brand-green-lt : #E3EDE4;

  /* Sage/olive — tertiary accent */
  --brand-sage    : #8FA84E;
  --brand-sage-dk : #5E7233;
  --brand-sage-lt : #F1F5E4;

  /* Near-black — panel black */
  --panel-black : #1A1A18;

  /* Structural */
  --steel      : #6B6560;   /* secondary dark — panel shadows        */

  /* --gold retired 2026-07-30 — every former usage migrated to
     --brand-sage (badges/buttons/borders), --brand-sage-lt (text
     needing more contrast against a mid-tone fill, e.g. .charge-word
     on .glyph's --steel background), or --accent (the SimplePractice
     widget specifically, as the one primary-action surface rather
     than a highlight). See git history for the pre-migration values
     if the old gold (#f2b705) is ever needed for reference.

     --dot retired the same day — the three halftone implementations
     that used it (.sheet, .panel::after, and the old print-only
     texture) are unified into one formula now applied directly
     (rgba(20,17,15,.06) light-mode / rgba(245,241,231,.05) dark-mode,
     both derived from --ink/--paper's own RGB) everywhere a
     background needs it — see body{} in launcher.css/main.css/
     site.css/knowledge.css, and the dark-surface panels (header,
     .band-dark, .site-nav, .qg-callout, .atk.inverted, etc). Kept as
     literal rgba() rather than a token because alpha can't be
     parameterized through a plain color custom property. */
}


/* ------------------------------------------------------------
   SPACING TOKENS
   Consistent spacing scale — use these instead of magic numbers.
   ------------------------------------------------------------ */

:root {
  --space-xs  : 4px;
  --space-sm  : 8px;
  --space-md  : 12px;
  --space-lg  : 16px;
  --space-xl  : 24px;
}


/* ------------------------------------------------------------
   BORDER TOKENS
   ------------------------------------------------------------ */

:root {
  --border-thin   : 2.5px solid var(--ink);
  --border-mid    : 3px   solid var(--ink);
  --border-thick  : 4px   solid var(--ink);
  --border-heavy  : 5px   solid var(--ink);
}