/*
  EUROCUTPRECISION — Design Tokens
  Source of truth: docs/40-design-system-foundations.md
  Do not introduce ad hoc values in component CSS — add a token here instead.
*/

:root {
  /* Color — Neutral scale (graphite) */
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #EEF0F3;
  --color-neutral-300: #C5C9D1;
  --color-neutral-500: #6B7280;
  --color-neutral-700: #3D414D;
  --color-neutral-900: #1B1E27;
  --color-neutral-950: #12141A;

  /* Color — Accent scale (steel-blue) */
  --color-accent-100: #E4EDF4;
  --color-accent-500: #2E6E9E;
  --color-accent-700: #1F4C73;

  /* Color — Semantic */
  --color-success-100: #E3F3EC;
  --color-success-700: #1E6B4F;
  --color-warning-100: #FBF0DC;
  --color-warning-700: #8A5A00;
  --color-error-100: #FBE7E7;
  --color-error-700: #9B2C2C;

  /* Typography (D-013: IBM Plex Sans / Plex Mono) */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --type-display-size: 3rem;      /* 48px */
  --type-display-line: 3.5rem;    /* 56px */
  --type-h1-size: 2.25rem;        /* 36px */
  --type-h1-line: 2.75rem;        /* 44px */
  --type-h2-size: 1.75rem;        /* 28px */
  --type-h2-line: 2.25rem;        /* 36px */
  --type-h3-size: 1.25rem;        /* 20px */
  --type-h3-line: 1.75rem;        /* 28px */
  --type-body-emph-size: 1rem;    /* 16px */
  --type-body-size: 1rem;         /* 16px */
  --type-body-line: 1.5rem;       /* 24px */
  --type-small-size: 0.875rem;    /* 14px */
  --type-small-line: 1.25rem;     /* 20px */
  --type-caption-size: 0.75rem;   /* 12px */
  --type-caption-line: 1rem;      /* 16px */

  /* Grid */
  --grid-max-width: 1280px;
  --grid-gutter-desktop: 24px;
  --grid-gutter-tablet: 16px;
  --grid-gutter-mobile: 16px;

  /* Spacing scale (base-4) */
  --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;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(18, 20, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(18, 20, 26, 0.10);

  /* Icon */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-stroke: 1.5px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Breakpoints (referenced in CSS via media queries, kept here for documentation parity) */
  --breakpoint-tablet: 640px;
  --breakpoint-desktop: 1024px;
}

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