/*
  Design tokens — Clothics Embroidery ("The Stitching Hub").
  Brand direction: craftsmanship + technology + reliability + scale.
  Cool slate ground with a terracotta-thread accent — chosen deliberately
  over the earlier warm-cream/brass palette, which reads as the generic
  "artisan/premium-craft" template (see DESIGN-SYSTEM.md for the audit
  rationale). Slate reads production/technical (machines, precision);
  terracotta keeps the warmth of thread and handwork without tipping into
  boutique-lifestyle beige. Distinct from both the internal Clothics.Web ERP
  palette and generic navy-SaaS B2B defaults.
*/

:root {
  /* ---- Color: neutrals (cool slate, not warm cream) ---- */
  --color-slate-0: #fafafa;
  --color-slate-50: #f0f1f2;
  --color-slate-100: #e2e4e7;
  --color-slate-200: #c7cbd1;
  --color-slate-400: #8b929b;
  --color-slate-600: #565d66;
  --color-slate-800: #2c3138;
  --color-slate-900: #16181b;

  /* ---- Color: shell / surface ---- */
  --color-shell: var(--color-slate-50);
  --color-surface: var(--color-slate-0);
  --color-surface-sunken: var(--color-slate-100);
  --color-border: var(--color-slate-200);
  --color-border-strong: var(--color-slate-400);

  /* ---- Color: accent (terracotta thread) ---- */
  --color-accent: #b3512c;
  --color-accent-bright: #d67a4c;
  --color-accent-deep: #7a3319;
  --color-accent-surface: #f3e2d6;

  --color-text: var(--color-slate-900);
  --color-text-muted: var(--color-slate-600);
  --color-text-on-accent: var(--color-slate-0);
  --color-text-on-ink: var(--color-slate-50);

  --color-success: #2f6d47;
  --color-success-surface: #e7f2e9;
  --color-danger: #a13a2f;
  --color-danger-surface: #f8e8e5;

  /* ---- Type ----
     Bricolage Grotesque (display) + IBM Plex Sans (UI/body) — a distinctive,
     production/technical pairing rather than the Fraunces+Inter combination
     the audit flagged as a common template default. Bricolage's slight
     irregularity gives headings real character without reaching for a
     craft-cliché serif; Plex Sans reads engineered and highly legible at
     small sizes (labels, form fields, footer). */
  --font-display: "Bricolage Grotesque", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

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

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius / shadow ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 24, 27, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 24, 27, 0.10);
  --shadow-lg: 0 24px 48px rgba(22, 24, 27, 0.16);

  --border-width: 1px;

  /* ---- Layout ---- */
  --max-width: 1200px;
  --header-height: 76px;

  --focus-ring: 0 0 0 3px var(--color-accent-surface), 0 0 0 1px var(--color-accent);
}