/* ============================================================
   variables.css — SmallHRTools Design Tokens
   All design decisions live here. Change a value here and it
   updates everywhere it's used — no hunting through style.css.
   ============================================================ */

:root {

  /* ── Colors ──────────────────────────────────────────────── */
  --ink-green:  #1B4332;   /* primary — nav, headings, primary buttons    */
  --stamp-gold: #C89A3D;   /* accent  — CTAs, active states, highlights   */
  --stamp-red:  #A8442E;   /* rare    — stamp badges only, used sparingly */
  --paper:      #F4F5EF;   /* page background                             */
  --paper-line: #DCDFD4;   /* hairline rules, dividers, card borders      */
  --ink-black:  #1A1D1A;   /* body text                                   */
  --white:      #FFFFFF;   /* card surfaces                               */

  /* Derived tones (not in spec, used internally for hover states) */
  --ink-green-dark:  #122d22;  /* deeper green for button hover   */
  --ink-green-light: #2a6348;  /* lighter for secondary bg tints  */
  --stamp-gold-dark: #a67e30;  /* darker gold for hover states    */
  --paper-dark:      #e8e9e2;  /* slightly deeper paper for inputs */

  /* ── Typography ──────────────────────────────────────────── */
  /*
   * PRODUCTION NOTE: Self-host these as .woff2 files in /assets/fonts/
   * and replace Google Fonts <link> in index.html with @font-face rules.
   * Current setup uses Google Fonts CDN for initial development speed.
   *
   * @font-face stubs (swap out the src when files are ready):
   *
   * @font-face {
   *   font-family: 'Fraunces';
   *   src: url('../assets/fonts/Fraunces-700.woff2') format('woff2');
   *   font-weight: 700;
   *   font-display: swap;
   * }
   * @font-face {
   *   font-family: 'Karla';
   *   src: url('../assets/fonts/Karla-400.woff2') format('woff2');
   *   font-weight: 400;
   *   font-display: swap;
   * }
   * @font-face {
   *   font-family: 'IBM Plex Mono';
   *   src: url('../assets/fonts/IBMPlexMono-400.woff2') format('woff2');
   *   font-weight: 400;
   *   font-display: swap;
   * }
   */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Karla', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ── Type Scale (fluid, mobile-first via clamp()) ────────── */
  /*
   * clamp(MIN, PREFERRED, MAX)
   * The preferred value is a viewport-relative expression so font size
   * grows smoothly between breakpoints instead of jumping.
   */
  --fs-h1:         clamp(2.25rem, 5vw + 1rem, 4rem);
  --fs-h2:         clamp(1.75rem, 3vw + 1rem, 2.75rem);
  --fs-h3:         clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-mono-stat:  clamp(1.5rem, 2vw + 1rem, 2.25rem);

  /* ── Spacing (4px base scale) ────────────────────────────── */
  /*
   * --space-N = N × 4px
   * Section padding uses --space-16 (128px) on desktop,
   * --space-8 (64px) on mobile.
   */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:       1280px;
  --content-width:   900px;
  --gutter:          var(--space-6);  /* horizontal page padding */
  --nav-height:      72px;
  --nav-height-compact: 56px;

  /* ── Borders & Radii ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --border-hairline: 1px solid var(--paper-line);
  --border-card:     1.5px solid var(--paper-line);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(27, 67, 50, 0.08);
  --shadow-md:   0 4px 16px rgba(27, 67, 50, 0.10);
  --shadow-lg:   0 8px 32px rgba(27, 67, 50, 0.14);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}