/*
  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;
  /* Muted body text on a LIGHT ground.
     Was #6B7280, which measures 4.83:1 on white — a pass — and 4.23:1 on
     --color-neutral-100, which is not. Every muted note sitting on a tinted panel failed
     WCAG AA by a quarter of a point, in a colour that passes everywhere else, which is
     why nobody saw it. #616875 is 5.6:1 on white and 4.9:1 on the tint, and is barely
     distinguishable from the colour it replaces. */
  --color-neutral-500: #616875;
  --color-neutral-700: #3D414D;
  --color-neutral-900: #1B1E27;
  --color-neutral-950: #12141A;
  /* Muted text on a DARK ground (neutral-900 / 950).
     A separate token, because the two problems pull in opposite directions: the muted
     tone has to go darker to work on a tint and lighter to work on the footer. Reusing
     the light-ground token on the dark footer gave 3.44:1 — the tagline, the copyright
     and all four policy links. This gives 5.3:1. */
  --color-on-dark-muted: #8A91A0;

  /* Color — Accent scale (brand blue, unified with the EC logo — #0B4096) */
  --color-accent-100: #E4EAF4;
  --color-accent-300: #7C9CD6; /* lighter tint — for accent lines/text on dark surfaces, where accent-500 lacks contrast */
  --color-accent-500: #0B4096;
  --color-accent-700: #082C68;

  /* 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: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  --type-display-line: 1.08;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.08em;
  --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;
  }
}