/* ==========================================================================
   SPARKLE INK TATTOOS — DESIGN TOKENS
   Strictly adheres to Section 4: Modern Ink Atelier Art Direction
   ========================================================================== */

:root {
  /* Core Color Palette */
  --ink-black: #0E0D0C;       /* Primary dark background, header, footer */
  --charcoal: #1B1917;        /* Secondary dark surface (cards on dark bg) */
  --paper: #F4EFE6;           /* Primary light background (warm off-white) */
  --paper-dim: #E8E1D2;       /* Light-section card surfaces */
  --ember: #C08A2E;           /* Primary accent — CTAs, links, highlights, borders */
  --ember-dark: #8F661F;      /* Hover/active state of ember */
  --rust: #7A2E2A;            /* Secondary accent — deliberate stamps, badges */
  --ink-gray-500: #6B665E;    /* Body text on light background */
  --ink-gray-300: #9C968A;    /* Muted/secondary text, captions */
  --line: #D8D0C0;            /* Hairline borders on light sections */
  --line-dark: rgba(255, 255, 255, 0.12); /* Hairline borders on dark sections */
  --ink-light: #F7F5F0;       /* High-contrast text on dark backgrounds */
  --ink-muted: #A39D93;       /* Muted text on dark backgrounds */

  /* 8pt Spacing Scale Only */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Layout */
  --max-w: 1280px;
  --nav-height: 80px;
  --top-bar-height: 38px;
  --radius: 6px;              /* Strictly applied sitewide — no inconsistent radii */

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-stamp: 'Permanent Marker', cursive;

  /* Fluid Type Scale */
  --text-h1: clamp(2.75rem, 6vw, 5.25rem);
  --text-h2: clamp(2rem, 4vw, 3.25rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body: 1.05rem;
  --text-body-sm: 0.925rem;
  --text-eyebrow: 0.75rem;

  /* Animation Timings */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-indices */
  --z-base: 1;
  --z-nav: 100;
  --z-top: 110;
  --z-drawer: 200;
  --z-floating: 300;
  --z-modal: 1000;
}