/* ===========================================================
   TenEightOne Commerce — Design Tokens
   =========================================================== */

:root {
  /* --- Color --- */
  --c-black: #111111;
  --c-warm-white: #F7F6F2;
  --c-soft-gray: #E8E8E5;
  --c-charcoal: #292929;
  --c-accent: #315A72;
  --c-accent-light: #5C88A3;
  --c-accent-dim: #24435570;
  --c-line: #D9D8D3;
  --c-line-dark: #3A3A3A;

  /* brand tints (used only where portfolio logos appear) */
  --c-craftercuts: #1E9E8B;
  --c-luxia: #B78A4A;

  /* --- Type --- */
  --f-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Fraunces', 'Georgia', serif;

  /* --- Layout --- */
  --max-w: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 3px;
  --radius-m: 6px;

  /* --- Motion --- */
  --ease: cubic-bezier(.16,.8,.28,1);
  --dur: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}