/* ─────────────────────────────────────────────────────────────────────────
   tokens.css
   WeaveMatrix design system — single source of truth.
   All other CSS files read from these variables.
   ───────────────────────────────────────────────────────────────────────── */

:root {

  /* ── COLOUR PALETTE ──────────────────────────────────────────────────── */

  /* Base */
  --ink:          #0d0b09;   /* Deepest background */
  --ink-mid:      #1c1814;   /* Card / section backgrounds */
  --ink-light:    #2e2820;   /* Hover surfaces, borders */

  /* Ivory */
  --ivory:        #f2ede4;   /* Primary text */
  --ivory-dim:    #c8c0b2;   /* Secondary text */

  /* Gold — primary brand accent */
  --gold:         #c9a84c;
  --gold-light:   #e2c97e;   /* Hover state */
  --gold-pale:    rgba(201,168,76,0.12);

  /* Saffron — secondary accent (warm CTA heat) */
  --saffron:      #c95f20;

  /* Neutral */
  --stone:        #7a6e62;   /* Muted labels, placeholder text */
  --white:        #ffffff;

  /* ── TRANSPARENCY TOKENS ─────────────────────────────────────────────── */
  --gold-08:  rgba(201,168,76,0.08);
  --gold-12:  rgba(201,168,76,0.12);
  --gold-20:  rgba(201,168,76,0.20);
  --gold-30:  rgba(201,168,76,0.30);

  --ink-90:   rgba(13,11,9,0.90);
  --ink-60:   rgba(13,11,9,0.60);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Jost', 'Helvetica Neue', Arial, sans-serif;

  --size-xs:    0.65rem;   /* 10.4px — labels, captions */
  --size-sm:    0.75rem;   /* 12px   — small UI text */
  --size-base:  0.875rem;  /* 14px   — body copy */
  --size-md:    1rem;      /* 16px   — comfortable body */
  --size-lg:    1.25rem;   /* 20px   — lead text */

  --leading-tight:  1.15;
  --leading-normal: 1.65;
  --leading-loose:  1.9;

  --tracking-wide:  0.12em;
  --tracking-wider: 0.18em;

  /* ── 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-30:   120px;

  /* Horizontal page gutters */
  --gutter:     48px;
  --gutter-sm:  24px;

  /* Max content width */
  --max-width:  1280px;

  /* ── BORDERS ─────────────────────────────────────────────────────────── */
  --border-gold-subtle: 1px solid var(--gold-12);
  --border-gold:        1px solid var(--gold-30);

  /* ── TRANSITIONS ─────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   0.2s;
  --duration-base:   0.35s;
  --duration-slow:   0.6s;
  --duration-reveal: 0.9s;

  /* ── CURSOR ──────────────────────────────────────────────────────────── */
  --cursor-size:      8px;
  --cursor-ring-size: 32px;

  /* ── Z-INDEX STACK ───────────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-sticky:   50;
  --z-nav:      100;
  --z-drawer:   200;
  --z-overlay:  190;
  --z-cursor:   9999;
  --z-grain:    10000;
}

/* ── SCROLL REVEAL ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.50s; }

/* ── GLOBAL KEYFRAMES ──────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rotateSlowReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── CURSOR ────────────────────────────────────────────────────────────── */
.cursor {
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition:
    width  var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out),
    opacity 0.3s ease;
}
.cursor--hover {
  width: 14px;
  height: 14px;
}

.cursor-ring {
  position: fixed;
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition:
    width  var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}
.cursor-ring--hover {
  width: 52px;
  height: 52px;
}

/* ── GRAIN OVERLAY ─────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.6;
}

/* ── SHARED TYPOGRAPHY UTILITIES ───────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ivory-dim);
}

/* ── GOLD RULE ─────────────────────────────────────────────────────────── */
.gold-rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  display: block;
  flex-shrink: 0;
}

/* ── SECTION INNER (max-width wrapper) ─────────────────────────────────── */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 48px;
  transition:
    background  var(--duration-base) var(--ease-standard),
    color       var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform   var(--duration-fast) ease;
  cursor: none;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  color: var(--ink);
  background: var(--gold);
  border: 1px solid var(--gold);
}
.btn--primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.btn--secondary {
  color: var(--ivory);
  background: transparent;
  border: 1px solid var(--gold-30);
}
.btn--secondary:hover {
  border-color: var(--gold);
  background: var(--gold-08);
}

/* ── GLOBAL INQUIRY STRIP ──────────────────────────────────────────────── */
.inquiry-strip {
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, var(--gold-08) 0%, transparent 60%),
    var(--ink-light);
  border-top: var(--border-gold-subtle);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}
.inquiry-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gold-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-08) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.inquiry-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  position: relative;
}
.inquiry-strip-headline {
  font-size: clamp(1.8rem, 3vw, 3rem);
  color: var(--ivory);
  display: block;
  margin-bottom: var(--space-3);
}
.inquiry-strip-headline em {
  color: var(--gold);
}
.inquiry-strip-sub {
  font-size: var(--size-base);
  color: var(--ivory-dim);
  max-width: 400px;
  line-height: var(--leading-normal);
}
.inquiry-strip-actions {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .inquiry-strip-inner {
    flex-direction: column;
    text-align: center;
    padding: 0 var(--gutter-sm);
  }
  .inquiry-strip-sub { max-width: none; }
}

/* ── DRAWER BODY LOCK ──────────────────────────────────────────────────── */
body.drawer-open { overflow: hidden; }

/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}