/* ============================================================
   TRIBAL REBUILD — PHASE 1 · DESIGN TOKENS (compiled)
   Source: ~/workspace/standards/tribal-rebuild-phase1-config.json
   Standard: ELITE_GLOBAL_AGENCY_STANDARD
   ------------------------------------------------------------
   Contrast audit (compile-time, per spec rule):
   - #F4F4F6 on #0B0B0C → 17.91:1 ✓ (AA pass)
   - #9A9A8C on #0B0B0C → 6.91:1  ✓ (AA pass, no bump needed)
   - #9A9A8C on #141416 → 6.46:1  ✓ (AA pass)
   ============================================================ */

:root {
  /* ---- Liquid Obsidian palette ---- */
  --canvas-base: #0B0B0C;
  --surface-container: #141416;
  --text-primary: #F4F4F6;
  --text-muted: #9A9A8C;               /* verified 6.9:1 on canvas */
  --border-glass: rgba(244, 244, 246, 0.08);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;  /* Sovereign/Timeless */
  --font-body: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif; /* TBD: Antwan picks final geometric sans */
  --scale-ratio: 1.618;                /* golden-ratio type scale */
  --weight-display: 900;
  --weight-body: 400;
  --tracking-display: -0.03em;
  --tracking-body: 0.01em;

  /* Golden-ratio scale steps (base 16px) */
  --step--1: 0.618rem;    /* 9.9px  — micro labels */
  --step-0:  1rem;        /* 16px   — body */
  --step-1:  1.618rem;    /* 25.9px — subheads */
  --step-2:  2.618rem;    /* 41.9px — section titles */
  --step-3:  4.236rem;    /* 67.8px — large display */
  --step-4:  6.854rem;    /* 109.7px — hero display */
  --step-5:  11.09rem;    /* 177.4px — massive editorial */

  /* ---- Spatial ---- */
  --max-width: 1440px;
  --pad-y-desktop: 160px;
  --pad-y-tablet: 120px;
  --pad-y-mobile: 90px;
  --gutter-tablet: 24px;

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
  --duration: 400ms;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }

body {
  background: var(--canvas-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  margin: 0;
}

/* ---- Floating glass modules over dark canvas ---- */
.module {
  background: var(--surface-container);
  border: 1px solid var(--border-glass);
  border-radius: 4px;
  backdrop-filter: blur(12px);
  transition: border-color var(--duration) var(--ease-premium),
              transform var(--duration) var(--ease-premium);
}
.module:hover {
  border-color: rgba(244, 244, 246, 0.22);
  transform: translateY(-2px);
}

/* ---- Elder-accessible validation ----
   Faint red borders EXPLICITLY PROHIBITED by spec.
   Errors render as high-contrast large text beneath the input. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  color: var(--text-primary);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.4;
}
.field-error .warning-icon {
  flex: none;
  width: 1.4em;
  height: 1.4em;
}
label {
  display: block;
  color: var(--text-primary);   /* label contrast minimum: full primary */
  font-size: var(--step-0);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
input, select, textarea {
  width: 100%;
  background: var(--surface-container);
  border: 1px solid var(--border-glass);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: 0.9rem 1.1rem;
}

/* ---- Reduced motion: full override ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  .module:hover { transform: none; }
}

/* ---- Breakpoints ----
   mobile  0–767px    → --pad-y-mobile
   tablet  768–1023px → --pad-y-tablet, 24px inline gutter
   desktop 1024px+    → --pad-y-desktop                                    */