/* ==========================================================================
   Inkline — Design Tokens v1.0  ·  Direction A "Drafting Table" (light primary)
   Source of truth: SPEC.md §3. Mirror: tokens.json
   ========================================================================== */
:root {
  /* ---- Color · paper & ink ---------------------------------------------- */
  --ink-paper:        #F4F1EA; /* page background (warm drafting paper) */
  --ink-sheet:        #FBF9F4; /* raised surface: artboard, panels, inputs */
  --ink-sheet-sunk:   #ECE8DE; /* wells, segmented track, code blocks */
  --ink-rule:         #D6D0C3; /* 1px hairlines, borders */
  --ink-rule-strong:  #B9B2A3; /* dashed artboard edge, decorative dividers (2.0:1 — NOT for input boundaries) */
  --ink-faint:        #8A8478; /* input/control boundaries + decoration (3.3:1, meets 1.4.11); never body text */
  --ink-muted:        #5C574D; /* secondary text — 6.4:1 on paper */
  --ink-text:         #16140F; /* primary text / ink — 16.3:1 on paper */
  --ink-inverse:      #FBF9F4; /* text on ink/accent */

  /* ---- Color · the one accent: Plotter Vermillion ----------------------- */
  --ink-accent:        #C8361C; /* CTA, focus, active, anchor nodes — 4.65:1 on paper, sheet-on-accent 5.0:1 */
  --ink-accent-hover:  #A92C15;
  --ink-accent-press:  #8C2410;
  --ink-accent-tint:   #F6E4DC; /* selected bg — text on it must be --ink-text (accent-on-tint is 4.26, icons/borders only) */

  /* ---- Color · status (always paired with icon + words) ----------------- */
  --ink-success:       #1F6B4A; /* 5.7:1 on paper */
  --ink-success-tint:  #E1EDE5;
  --ink-warning:       #8A5A00; /* 5.3:1 on paper */
  --ink-warning-tint:  #F3E9D2;
  --ink-danger:        #9B1C2E; /* crimson, cooler than accent — 7.2:1 on paper */
  --ink-danger-tint:   #F5E1E3;
  --ink-info:          #23506B;

  /* ---- Focus ------------------------------------------------------------ */
  --ink-focus-ring:    0 0 0 2px var(--ink-paper), 0 0 0 4px var(--ink-accent);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 — mono labels, captions */
  --text-sm:   0.875rem;  /* 14 — secondary UI */
  --text-base: 1rem;      /* 16 — body, inputs (never smaller on mobile inputs) */
  --text-lg:   1.125rem;  /* 18 — lead */
  --text-xl:   1.375rem;  /* 22 — section title */
  --text-2xl:  1.75rem;   /* 28 — page title */
  --text-3xl:  2.5rem;    /* 40 — hero mobile */
  --text-4xl:  3.5rem;    /* 56 — hero desktop */

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  --tracking-display: -0.03em;
  --tracking-title:   -0.015em;
  --tracking-mono:    0.04em;   /* uppercase mono labels */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-0: 0;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii (sharp) ---------------------------------------------------- */
  --radius-0: 0;       /* artboard, rules, tables */
  --radius-sm: 2px;    /* chips, tags, anchor nodes */
  --radius-md: 4px;    /* buttons, inputs, segmented */
  --radius-lg: 6px;    /* panels */
  --radius-xl: 8px;    /* max — dialogs only */

  /* ---- Elevation (almost none — paper is flat) -------------------------- */
  --shadow-none: none;
  --shadow-sheet: 0 1px 0 rgba(22,20,15,.06);                      /* panel resting on paper */
  --shadow-lift:  0 1px 0 rgba(22,20,15,.06), 0 8px 24px -12px rgba(22,20,15,.18); /* menus, dialogs only */

  /* ---- Borders ---------------------------------------------------------- */
  --border-hair:   1px solid var(--ink-rule);
  --border-strong: 1px solid var(--ink-rule-strong);
  --border-control: 1px solid var(--ink-faint);   /* inputs, segmented, secondary buttons */
  --border-ink:    1px solid var(--ink-text);
  --border-artboard: 1px dashed var(--ink-rule-strong);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 20px;      /* mobile; 32px ≥768; 40px ≥1024 */
  --nav-height: 56px;
  --tap-min: 44px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ---- Texture ---------------------------------------------------------- */
  --grid-size: 24px;
  --grid-line: rgba(22,20,15,.045);
}

/* Breakpoints (use in media queries; CSS vars can't be used there):
   sm 480px · md 768px · lg 1024px · xl 1280px */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* Optional quiet dark ("Night shift") — NOT in MVP scope; reserved. */
[data-theme="dark"] {
  --ink-paper:       #15140F;
  --ink-sheet:       #1C1B16;
  --ink-sheet-sunk:  #24221C;
  --ink-rule:        #34312A;
  --ink-rule-strong: #4A463C;
  --ink-faint:       #7A7468;
  --ink-muted:       #A9A396;
  --ink-text:        #F1EDE3;
  --ink-inverse:     #15140F;
  --ink-accent:      #E8573A;
  --ink-accent-hover:#F06C50;
  --ink-accent-press:#D44A2E;
  --ink-accent-tint: #3A1F17;
  --ink-success:     #5FBF8E;
  --ink-warning:     #D9A441;
  --ink-danger:      #F07A8A;
  --grid-line: rgba(241,237,227,.04);
}