/* ============================================================
   DESIGN TOKENS — JP Roll-Off Service
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- BRAND COLORS ---- */
  --color-red:           #CC0000;
  --color-red-dark:      #990000;
  --color-red-darker:    #660000;
  --color-red-soft:      #FFE5E5;
  --color-black:         #0A0A0A;
  --color-charcoal:      #1A1A1A;
  --color-graphite:      #2A2A2A;
  --color-gray-900:      #1F1F1F;
  --color-gray-700:      #4A4A4A;
  --color-gray-500:      #7A7A7A;
  --color-gray-300:      #C9C9C9;
  --color-gray-200:      #E5E5E5;
  --color-gray-100:      #F4F4F4;
  --color-gray-50:       #FAFAFA;
  --color-white:         #FFFFFF;
  --color-cream:         #FBF8F4;

  /* ---- SEMANTIC ---- */
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-cream);
  --color-bg-dark:       var(--color-black);
  --color-text:          var(--color-black);
  --color-text-muted:    var(--color-gray-700);
  --color-text-inverse:  var(--color-white);
  --color-accent:        var(--color-red);
  --color-accent-hover:  var(--color-red-dark);
  --color-border:        var(--color-gray-200);

  /* ---- TYPOGRAPHY ----
     Display:  DIN Neue Roman Black Italic (local file) — used on all headers
     Body:     Inter (Google Fonts)
     Mono:     system fallback (rarely used) */
  --font-display: 'DIN Neue Roman', 'Anton', 'Impact', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale (clamp) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-20: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-24: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --fs-32: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --fs-40: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --fs-56: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);
  --fs-72: clamp(2.75rem, 1.5rem + 5.5vw, 4.5rem);
  --fs-96: clamp(3.5rem, 2rem + 7vw, 6rem);
  --fs-128: clamp(4.5rem, 2.5rem + 9vw, 8rem);

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;

  /* ---- SPACING ---- */
  --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;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Section vertical rhythm */
  --section-y: clamp(64px, 8vw, 128px);

  /* ---- LAYOUT ---- */
  --container-max: 1280px;
  --container-px:  clamp(20px, 4vw, 48px);
  --content-max:   72ch;

  /* ---- RADII ---- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ---- BORDERS ---- */
  --border-thin:  1px solid var(--color-border);
  --border-thick: 2px solid var(--color-black);

  /* ---- SHADOWS ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.18);
  --shadow-red: 0 12px 32px rgba(204,0,0,.28);

  /* ---- MOTION ---- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    450ms;
  --dur-slower:  700ms;

  /* ---- Z-INDEX ---- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   500;
  --z-toast:   900;
}