/* ============================================================
   PavePro Industrial Yellow — Design Tokens
   Source: brand standalone / Direction A
   ============================================================ */

:root {
  /* ---- Color ---- */
  --ink:      #0E0F0C;                           /* asphalt black (primary bg) */
  --ink-2:    #1A1B17;                           /* alt section bg */
  --paper:    #F3EFE4;                           /* limestone (text on dark) */
  --paper-2:  #E8E3D3;
  --accent:   #F5D016;                           /* hi-vis caution yellow */
  --accent-2: #FF6A13;                           /* cone orange */
  --line:     rgba(243, 239, 228, 0.14);         /* hairline borders */
  --line-2:   rgba(243, 239, 228, 0.08);
  --muted:    #6B6B63;                           /* gravel */

  /* Semantic aliases */
  --bg:         var(--ink);
  --bg-alt:     var(--ink-2);
  --fg:         var(--paper);
  --fg-muted:   rgba(243, 239, 228, 0.72);
  --fg-faint:   rgba(243, 239, 228, 0.55);
  --border:     var(--line);
  --on-accent:  var(--ink);

  /* ---- Type ---- */
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Archivo Narrow', 'Archivo', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Display type — large, condensed, uppercase */
  --fs-display-xxl: clamp(56px, 11vw, 148px);    /* hero H1 */
  --fs-display-xl:  clamp(44px, 7.5vw, 96px);    /* "let's pave something" */
  --fs-display-lg:  clamp(40px, 6vw, 80px);      /* section H2 */
  --fs-display-md:  clamp(32px, 4.5vw, 64px);    /* secondary section H2 */
  --fs-display-sm:  clamp(24px, 3vw, 40px);      /* card title large */
  --fs-display-xs:  clamp(20px, 2vw, 28px);      /* card title small */

  /* Body type — readable */
  --fs-body-lg: clamp(17px, 1.5vw, 20px);
  --fs-body:    clamp(15px, 1.1vw, 17px);
  --fs-body-sm: 14px;
  --fs-body-xs: 13px;

  /* Mono labels */
  --fs-label:    11px;
  --fs-label-lg: 13px;

  --lh-display: 0.88;
  --lh-heading: 0.95;
  --lh-tight:   1.1;
  --lh-body:    1.55;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-mono:    0.14em;
  --tracking-mono-lg: 0.2em;

  /* ---- Space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  --section-y:  clamp(56px, 9vw, 96px);
  --page-x:     clamp(20px, 4vw, 48px);
  --max-w:      1280px;

  /* ---- Radius ---- */
  --r-0: 0;
  --r-1: 2px;           /* brand default — flat, industrial */
  --r-2: 4px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med:  260ms;
  --dur-slow: 520ms;

  /* ---- Signature motif: caution-tape gradient ---- */
  --caution-tape: repeating-linear-gradient(-45deg, var(--accent) 0 16px, var(--ink) 16px 32px);
  --hazard-stripes: repeating-linear-gradient(135deg, var(--ink-2) 0 24px, var(--ink) 24px 48px);

  /* Z */
  --z-nav: 100;
  --z-sticky: 50;
  --z-modal: 1000;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}