/**
 * tokens.css — Design tokens for Direction A: "Draft Marks".
 *
 * Implements the approved palette, typography scale, spacing, and component tokens.
 * Zero external requests; uses local WOFF2 assets verified in vendor/MANIFEST.md.
 */

/* --- Local Font Declarations --- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/bricolage-grotesque-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/figtree-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/figtree-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Approved Palette (Direction A: Draft Marks) --- */
  --slate-mist: #DEE3E6;      /* Ground / backdrop */
  --iron-gall: #181D20;       /* Structure, headings, high-contrast borders, text */
  --cobalt-yarn: #1E4CA1;     /* Primary actions, active program trace */
  --spruce-green: #17634F;    /* Target state, solved feedback, verified rules */
  --cinnabar: #A92523;        /* Error feedback, mismatch state */
  --ochre-dark: #875000;      /* Clues, headers, tags */
  --paper-light: #F2F5F7;     /* Loom well, card ground, inspection plates */
  --slate-neutral: #54636B;   /* Secondary captions, disabled controls, inactive borders */
  --draft-grid: #C8D1D5;      /* Weft and warp drafting lines */

  /* Focus ring for WCAG 2.1 AAA visibility */
  --focus-ring: #1E4CA1;
  --focus-offset: 3px;

  /* --- Controlled Draft Marks Gradients (Approved Palette Tints) --- */
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F2F5F7 100%);
  --grad-surface-active: linear-gradient(180deg, #F8FAFB 0%, #E8EEF1 100%);
  --grad-run-btn: linear-gradient(180deg, #1E4CA1 0%, #15397A 100%);
  --grad-run-btn-hover: linear-gradient(180deg, #255CC4 0%, #1A4694 100%);
  --grad-path-active: linear-gradient(135deg, rgba(30, 76, 161, 0.08) 0%, rgba(30, 76, 161, 0.02) 100%);
  --grad-solved: linear-gradient(135deg, #EFF7F4 0%, #E2F0EA 100%);
  --grad-error: linear-gradient(135deg, #FDF2F1 0%, #F8E3E1 100%);
  --grad-clue-header: linear-gradient(90deg, rgba(135, 80, 0, 0.08) 0%, transparent 100%);

  /* --- Technical Textile Draft Grid Texture --- */
  --pattern-loom-grid: linear-gradient(0deg, rgba(24, 29, 32, 0.035) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(24, 29, 32, 0.035) 1px, transparent 1px);
  --pattern-grid-size: 24px 24px;

  /* --- Typography Families --- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-ui: 'Figtree', 'Segoe UI', system-ui, sans-serif;

  /* --- Fluid Typography Scale (1.333 Perfect Fourth) --- */
  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.15rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.4rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.75rem + 1vw, 2.3rem);
  --step-4: clamp(2.3rem, 2.1rem + 1.5vw, 3rem);

  /* --- Spacing Scale --- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* --- Radii (Varied by component purpose, avoiding universal radius) --- */
  --radius-none: 0;
  --radius-subtle: 2px;
  --radius-chip: 4px;
  --radius-panel: 6px;

  /* --- Technical Shadows --- */
  --shadow-draft: 0 1px 3px rgba(24, 29, 32, 0.08), 0 1px 2px rgba(24, 29, 32, 0.04);
  --shadow-hover: 0 3px 6px rgba(24, 29, 32, 0.12);
  --shadow-inset: inset 0 1px 3px rgba(24, 29, 32, 0.14);

  /* --- Transition Durations --- */
  --trans-fast: 140ms ease-out;
  --trans-base: 220ms ease-out;
}