/* ============================================================
   PARIAH FINE JEWELLERY & BODY PIERCING — Design Tokens
   ============================================================
   Luxury-first dark palette with warm gold accents.
   All spacing, type, and colour decisions flow from here.
   ============================================================ */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --color-black:        #0a0a0a;
  --color-near-black:   #111111;
  --color-charcoal:     #1a1a1a;
  --color-dark-grey:    #222222;
  --color-mid-grey:     #2e2e2e;
  --color-muted-grey:   #3a3a3a;
  --color-soft-grey:    #8a8a8a; /* WCAG AA (>=4.5:1) on all site surfaces incl. #222 cards */
  --color-light-grey:   #999999;
  --color-pale-grey:    #cccccc;
  --color-off-white:    #e8e8e8;
  --color-white:        #f5f5f5;
  --color-pure-white:   #ffffff;

  /* Silver text tones (neutral) */
  --color-silver:       #c0c0c0;
  --color-brushed-silver: #b8b8b8;
  --color-chrome:       #d4d4d4;
  --color-steel:        #8a8a8a;
  --color-warm-silver:  #a8a098;

  /* Gold accents (decorative — glows, borders, hover) */
  --color-gold:         #c9a84c;
  --color-gold-rgb:     201, 168, 76;
  --color-gold-muted:   #a89050;
  --color-gold-bright:  #d4b85c;

  /* Functional */
  --color-accent:       var(--color-gold);
  --color-body-bg:      var(--color-black);
  --color-surface:      var(--color-near-black);
  --color-surface-alt:  var(--color-charcoal);
  --color-card:         var(--color-dark-grey);
  --color-border:       var(--color-muted-grey);
  --color-border-subtle:rgba(255, 255, 255, 0.06);
  --color-text-primary: var(--color-off-white);
  --color-text-secondary: var(--color-light-grey);
  --color-text-muted:   var(--color-soft-grey);
  --color-link:         var(--color-chrome);
  --color-link-hover:   var(--color-pure-white);

  /* Glow / overlay */
  --glow-gold:        0 0 20px rgba(var(--color-gold-rgb), 0.1);
  --glow-gold-strong: 0 0 40px rgba(var(--color-gold-rgb), 0.15);
  --overlay-dark:       rgba(10, 10, 10, 0.7);
  --overlay-darker:     rgba(10, 10, 10, 0.85);

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading:       'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body:          'DM Sans', 'Helvetica Neue', sans-serif;
  --font-accent:        'Cormorant Garamond', 'Georgia', serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  /* Scale — fluid clamp values */
  --text-xs:            clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:            clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base:          clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg:            clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  --text-xl:            clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:           clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:           clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  --text-4xl:           clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
  --text-5xl:           clamp(2.8rem, 2rem + 4vw, 5rem);
  --text-display:       clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Weight */
  --weight-light:       300;
  --weight-normal:      400;
  --weight-medium:      500;
  --weight-bold:        700; /* fallback — DM Sans is loaded at 300/400/500 */

  /* Line-height */
  --leading-tight:      1.15;
  --leading-snug:       1.3;
  --leading-normal:     1.6;
  --leading-relaxed:    1.8;

  /* Letter-spacing */
  --tracking-tight:     -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.2em;
  --tracking-mega:      0.35em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:            0.25rem;
  --space-2:            0.5rem;
  --space-3:            0.75rem;
  --space-4:            1rem;
  --space-5:            1.25rem;
  --space-6:            1.5rem;
  --space-8:            2rem;
  --space-10:           2.5rem;
  --space-12:           3rem;
  --space-16:           4rem;
  --space-20:           5rem;
  --space-24:           6rem;
  --space-32:           8rem;
  --space-40:           10rem;
  --space-48:           12rem;

  /* Section spacing */
  --section-padding:    clamp(4rem, 3rem + 5vw, 8rem);
  --section-gap:        clamp(2rem, 1.5rem + 3vw, 5rem);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:       640px;
  --container-md:       768px;
  --container-lg:       1024px;
  --container-xl:       1200px;
  --container-2xl:      1400px;
  --container-max:      1600px;
  --content-width:      min(90%, var(--container-xl));
  --content-narrow:     min(90%, var(--container-md));

  /* ── Borders & Radius ────────────────────────────────────── */
  --radius-sm:          2px;
  --radius-md:          4px;
  --radius-lg:          8px;
  --radius-xl:          12px;
  --radius-full:        9999px;
  --border-thin:        1px solid var(--color-border-subtle);
  --border-accent:      1px solid var(--color-muted-grey);

  /* ── Transitions ─────────────────────────────────────────── */
  --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);
  --duration-fast:      150ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;
  --duration-slowest:   1200ms;
  --transition-base:    all var(--duration-normal) var(--ease-out);
  --transition-slow:    all var(--duration-slow) var(--ease-out);
  --transition-color:   color var(--duration-normal) var(--ease-out),
                        background-color var(--duration-normal) var(--ease-out),
                        border-color var(--duration-normal) var(--ease-out);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-toast:            500;
  --z-nav:              600;
}

@media (max-width: 768px) {
  :root {
    --section-padding: 2.5rem;
    --section-gap: 1.25rem;
  }
}