/*
 * Gharam — base tokens & reset.
 * Carries the Noir Vault design system tokens as CSS custom properties so
 * every page-level stylesheet can reference them without redefining.
 * See DESIGN.md at the project root for the canonical token spec.
 */

:root {
  /* Colors */
  --c-bg:        #0d0907;
  --c-ink:       #1a1410;
  --c-paper:     #181210;
  --c-cream:     #e8d9b8;
  --c-cream-70:  rgba(232, 217, 184, 0.70);  /* 7.19:1 on --c-bg */
  --c-cream-55:  rgba(232, 217, 184, 0.55);  /* 4.78:1 — the WCAG-AA floor for text */
  /* 0.50/0.45/0.40 fail AA on the near-black surface (4.12 / 3.53 / 3.02:1).
     Clamped to the 0.55 AA floor: lower opacities are not legible for text
     here. The hooks are kept so existing selectors keep their hierarchy intent;
     the meaningful quiet/quieter distinction now lives in --c-cream-70 vs -55. */
  --c-cream-50:  rgba(232, 217, 184, 0.55);
  --c-cream-45:  rgba(232, 217, 184, 0.55);
  --c-cream-40:  rgba(232, 217, 184, 0.55);
  --c-gold:      #c9a35a;
  --c-gold-hover:#d4ad6a;   /* primary-button hover only */
  --c-gold-2:    #8a6a3a;
  --c-rust:      #5a1818;
  --c-rust-soft: #a85a5a;
  --c-avail-out: #c97070;   /* WCAG-AA negative state (5.70:1) for ≤10px badges */
  --c-rule:      rgba(232, 217, 184, 0.14);
  --c-rule-32:   rgba(232, 217, 184, 0.32);
  --c-hairline:  rgba(232, 217, 184, 0.08);

  /* Z-index scale — semantic layers, never arbitrary 9999s. */
  --z-base:    1;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-chat:    400;
  --z-skip:    900;   /* skip-link must clear everything when focused */

  /* Fonts */
  --f-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-italic:    'Spectral', Georgia, 'Times New Roman', serif;
  --f-sans:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing */
  --s-xs: 8px;
  --s-sm: 14px;
  --s-md: 24px;
  --s-lg: 48px;
  --s-xl: 88px;
  --s-2xl: 96px;
  --page-x: 56px;

  /* Tracked letter-spacing — mono only */
  --tr-14: 0.14em;
  --tr-18: 0.18em;
  --tr-22: 0.22em;
  --tr-24: 0.24em;
  --tr-32: 0.32em;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-bg);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button {
  font: inherit; color: inherit; background: none; border: none;
  cursor: pointer; padding: 0;
}
a { color: inherit; text-decoration: none; }

/* Type helpers — exactly mirror the prototype's class hooks */
.display   { font-family: var(--f-display); font-weight: 400; }
.serif     { font-family: var(--f-serif); }
.italic    { font-family: var(--f-italic); font-style: italic; font-weight: 300; }
.sans      { font-family: var(--f-sans); }
.mono      { font-family: var(--f-mono); }
/* WARNING: .upper applies letter-spacing. Only use on mono or sans elements.
   NEVER apply to Playfair Display, Cormorant Garamond, or Spectral — brand rule. */
.upper     { text-transform: uppercase; letter-spacing: var(--tr-18); }

/* Tone color helpers */
.t-cream    { color: var(--c-cream); }
.t-cream-70 { color: var(--c-cream-70); }
.t-cream-55 { color: var(--c-cream-55); }
.t-cream-50 { color: var(--c-cream-50); }
.t-cream-45 { color: var(--c-cream-45); }
.t-cream-40 { color: var(--c-cream-40); }
.t-gold     { color: var(--c-gold); }
.t-rust     { color: var(--c-rust-soft); }

/* Skip-to-content link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--z-skip);
  padding: 12px 22px;
  background: var(--c-gold);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: var(--tr-18);
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus state — always visible, always on-brand */
:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--c-gold);
  color: var(--c-ink);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}