/* AUTO-GENERATED from 4-design/tokens/*.tokens.json */
/* DO NOT EDIT. Run npm run tokens:build to refresh. */

:root {
  /* — Surface — */
  --canvas: #f2ede2;
  --canvas-alt: #e9e2d0;
  --card: #ffffff;
  --input-bg: #fafafa;

  /* — Text — */
  --heading: #0f1424;
  --body: #3a4055;
  --body-light: #3a4055;
  --muted: #6b7188;

  /* — Text (on coloured surfaces) — */
  --text-on-accent: #0f1424;
  --text-on-error: #ffffff;
  --text-inverse: #ffffff;

  /* — Borders — */
  --border: #d9d2c2;
  --border-light: #e5e0d2;

  /* — Brand accent (D1 orange) — */
  --accent: #ff7000;
  --accent-hover: #e55f00;
  --accent-bg: #ffe1cc;

  /* — Brand accent (D1 support palette) — */
  --accent-peach: #ffb199;
  --accent-green: #1fb44a;
  --accent-teal: #0bc4a8;
  --accent-sky-blue: #1fa1fb;
  --accent-deep-blue: #1f6fd9;
  --accent-red: #e51a1a;

  /* — State: error — */
  --error: #e51a1a;
  --error-bg: #fef2f2;

  /* — State: warning — */
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-dark: #92400e;

  /* — State: info — */
  --info: #1f6fd9;
  --info-bg: #dbeafe;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15,20,36,0.05), 0 1px 3px 0 rgba(15,20,36,0.05);
  --shadow-md: 0 4px 6px 0 rgba(15,20,36,0.07), 0 2px 4px 0 rgba(15,20,36,0.05);
  --shadow-lg: 0 10px 25px 0 rgba(15,20,36,0.08), 0 4px 10px 0 rgba(15,20,36,0.04);
  --shadow-xl: 0 20px 50px 0 rgba(15,20,36,0.08), 0 4px 10px 0 rgba(15,20,36,0.04);

  /* Border-radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  /* Border widths */
  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* Typography */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: Consolas, 'Courier New', ui-monospace, monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* Container widths */
  --container-narrow: 420px;
  --container-medium: 600px;
  --container-reading: 720px;
  --container-full: 1140px;

  /* Touch targets (a11y) */
  --touch-target-minimum: 44px;
  --touch-target-mobile: 48px;

  /* Motion — durations */
  --duration-fast: 120ms;
  --duration-default: 200ms;
  --duration-slow: 320ms;

  /* Motion — easings */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: cubic-bezier(0, 0, 1, 1);

  /* Cartridge layout — nav + section padding rhythm */
  --nav-h: 80px;
  --section-pad-xs: 56px;
  --section-pad-sm: 72px;
  --section-pad-md: 88px;
  --section-pad-lg: 104px;
  --section-pad-xl: 128px;
  --section-pad-flush: 0;

  /* — Backward-compat aliases (do not introduce new uses; prefer canonical names above) — */
  --bg: var(--canvas);
  --success: var(--accent);
  --success-dark: var(--accent-hover);
  --success-bg: var(--accent-bg);
  --danger: var(--error);
  --danger-bg: var(--error-bg);

  /* Radius alias — prefer --radius-lg */
  --radius: var(--radius-lg);

  /* Background — graph-paper grid SVG (TradeCraft signature texture) */
  --grid-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M 28 0 L 0 0 0 28' fill='none' stroke='rgba(174,167,156,0.32)' stroke-width='1'/%3E%3C/svg%3E");

}