/* ============================================================
   AEQUARA · DESIGN TOKENS · v1 · 2026-05-10
   The single source of truth for every Aequara surface.
   Import with:  @import url("./design-tokens.css");
   ============================================================ */

:root {

  /* ---------- INK (structural foreground) ---------- */
  --aeq-ink:           #0E1116;
  --aeq-ink-soft:      #1A1F26;
  --aeq-ink-mute:      #3A4049;

  /* ---------- BONE (light ground) ---------- */
  --aeq-bone:          #F5F2EB;
  --aeq-bone-warm:     #F8F4EA;
  --aeq-bone-deep:     #EAE6DC;

  /* ---------- FIDUCIARY METALS (verdict authority) ---------- */
  --aeq-bronze:        #8B6F3F;
  --aeq-bronze-deep:   #6B5530;
  --aeq-gilt:          #C9A961;
  --aeq-gilt-light:    #D9B973;

  /* ---------- CONFETTI (secondary palette) ---------- */
  --aeq-aurora:        #D67E5E;   /* sunrise coral · marketing warmth */
  --aeq-verdigris:     #3D6B5C;   /* aged-bronze patina · "true" state */
  --aeq-lapis:         #1E3A52;   /* navigator's sea · NEXUS accent */
  --aeq-plum:          #4A2E40;   /* depth · Cipher accent */
  --aeq-sage:          #7A9484;   /* light verdigris · Hubz secondary */
  --aeq-rose:          #E89B7F;   /* light aurora · Lumen secondary */
  --aeq-emerald:       #2C5F5F;   /* deep secure-green · Vault accent */
  --aeq-amber:         #B0824A;   /* warm horizon amber · Horizon accent */

  /* ---------- SEMANTIC ALIASES ---------- */
  --aeq-bg:            var(--aeq-bone);
  --aeq-bg-warm:       var(--aeq-bone-warm);
  --aeq-bg-deep:       var(--aeq-bone-deep);
  --aeq-fg:            var(--aeq-ink);
  --aeq-fg-soft:       var(--aeq-ink-soft);
  --aeq-fg-mute:       var(--aeq-ink-mute);
  --aeq-accent:        var(--aeq-bronze);
  --aeq-accent-strong: var(--aeq-bronze-deep);
  --aeq-true:          var(--aeq-verdigris);
  --aeq-verdict:       var(--aeq-gilt);

  /* ---------- DARK MODE / INVERSION ---------- */
  --aeq-bg-dark:       var(--aeq-ink);
  --aeq-bg-dark-soft:  var(--aeq-ink-soft);
  --aeq-fg-dark:       var(--aeq-bone);
  --aeq-fg-dark-soft:  rgba(245,242,235,.78);
  --aeq-fg-dark-mute:  rgba(245,242,235,.55);

  /* ---------- RULES (separators) ---------- */
  --aeq-rule:          rgba(14,17,22,.12);
  --aeq-rule-strong:   rgba(14,17,22,.24);
  --aeq-rule-on-dark:  rgba(245,242,235,.14);

  /* ---------- TYPE FAMILIES ---------- */
  --aeq-serif:         'Fraunces', Georgia, serif;
  --aeq-sans:          'DM Sans', "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --aeq-mono:          "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- TYPE SCALE (modular ratio 1.25) ---------- */
  --aeq-text-xs:       11px;
  --aeq-text-sm:       12.5px;
  --aeq-text-base:     14px;
  --aeq-text-md:       16px;
  --aeq-text-lg:       19px;
  --aeq-text-xl:       24px;
  --aeq-text-2xl:      32px;
  --aeq-text-3xl:      40px;
  --aeq-text-4xl:      56px;
  --aeq-text-5xl:      72px;
  --aeq-text-6xl:      96px;
  --aeq-text-7xl:      clamp(72px, 9vw, 120px);

  /* ---------- TRACKING ---------- */
  --aeq-track-tight:   -.018em;
  --aeq-track-base:    .01em;
  --aeq-track-wide:    .06em;
  --aeq-track-eyebrow: .18em;
  --aeq-track-display: .32em;

  /* ---------- LINE HEIGHTS ---------- */
  --aeq-lh-display:    1.1;
  --aeq-lh-tight:      1.2;
  --aeq-lh-base:       1.55;
  --aeq-lh-relaxed:    1.65;

  /* ---------- 8PT RHYTHM ---------- */
  --aeq-s-1:           4px;
  --aeq-s-2:           8px;
  --aeq-s-3:           16px;
  --aeq-s-4:           24px;
  --aeq-s-5:           32px;
  --aeq-s-6:           48px;
  --aeq-s-7:           64px;
  --aeq-s-8:           96px;
  --aeq-s-9:           128px;

  /* ---------- RADII ---------- */
  --aeq-radius-sm:     3px;
  --aeq-radius-md:     6px;
  --aeq-radius-lg:     12px;
  --aeq-radius-pill:   999px;

  /* ---------- ELEVATION ---------- */
  --aeq-shadow-sm:     0 1px 2px rgba(14,17,22,.04), 0 1px 3px rgba(14,17,22,.06);
  --aeq-shadow-md:     0 4px 12px rgba(14,17,22,.06), 0 2px 4px rgba(14,17,22,.04);
  --aeq-shadow-lg:     0 12px 40px rgba(14,17,22,.10), 0 4px 12px rgba(14,17,22,.06);
  --aeq-shadow-gilt:   0 0 0 1px rgba(201,169,97,.4), 0 4px 12px rgba(201,169,97,.18);

  /* ---------- MOTION ---------- */
  --aeq-motion-drop:   3.4s cubic-bezier(.16,.84,.44,1);
  --aeq-motion-pulse:  1.8s ease-in-out;
  --aeq-motion-focus:  1.2s cubic-bezier(.65,.05,.36,1);
  --aeq-motion-snap:   180ms cubic-bezier(.4,0,.2,1);
  --aeq-motion-glide:  420ms cubic-bezier(.22,.61,.36,1);

  /* ---------- SUB-BRAND ACCENTS ---------- */
  --aeq-sub-nexus:     var(--aeq-lapis);
  --aeq-sub-npx100:    var(--aeq-gilt);
  --aeq-sub-lumen:     var(--aeq-aurora);
  --aeq-sub-cipher:    var(--aeq-plum);
  --aeq-sub-hubz:      var(--aeq-verdigris);
  --aeq-sub-compass:   var(--aeq-sage);
  --aeq-sub-axistruth: var(--aeq-rose);
  --aeq-sub-vault:     var(--aeq-emerald);
  --aeq-sub-horizon:   var(--aeq-amber);
  --aeq-sub-parent:    var(--aeq-bronze);

  /* ---------- LAYOUT ---------- */
  --aeq-container:     1280px;
  --aeq-container-narrow: 920px;
  --aeq-container-prose: 720px;
}

/* ============================================================
   GLOBAL RESETS + DEFAULTS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--aeq-bg);
  color: var(--aeq-fg);
  font-family: var(--aeq-serif);
  font-size: var(--aeq-text-md);
  line-height: var(--aeq-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "liga", "kern";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-weight: 400;
  letter-spacing: var(--aeq-track-base);
  margin: 0 0 var(--aeq-s-3);
  font-family: var(--aeq-serif);
}
h1 { font-size: var(--aeq-text-5xl); line-height: var(--aeq-lh-display); letter-spacing: var(--aeq-track-tight); }
h2 { font-size: var(--aeq-text-3xl); line-height: var(--aeq-lh-tight); }
h3 { font-size: var(--aeq-text-xl); line-height: var(--aeq-lh-tight); }
h4 { font-size: var(--aeq-text-lg); }

p {
  font-family: var(--aeq-sans);
  font-size: var(--aeq-text-base);
  line-height: var(--aeq-lh-relaxed);
  color: var(--aeq-fg-soft);
  max-width: 64ch;
  margin: 0 0 var(--aeq-s-3);
}

a { color: var(--aeq-fg); text-decoration: none; border-bottom: 1px solid var(--aeq-rule-strong); transition: border-color var(--aeq-motion-snap); }
a:hover { border-bottom-color: var(--aeq-bronze); }

code, pre, .mono { font-family: var(--aeq-mono); font-size: var(--aeq-text-sm); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.aeq-eyebrow {
  font-family: var(--aeq-sans);
  font-size: var(--aeq-text-xs);
  letter-spacing: var(--aeq-track-eyebrow);
  text-transform: uppercase;
  color: var(--aeq-fg-mute);
  font-weight: 500;
}
.aeq-display {
  font-family: var(--aeq-serif);
  font-weight: 400;
  letter-spacing: var(--aeq-track-display);
  text-indent: var(--aeq-track-display);
}
.aeq-italic-quote {
  font-family: var(--aeq-serif);
  font-style: italic;
  color: var(--aeq-bronze);
}
.aeq-rule { height: 1px; background: var(--aeq-rule); border: none; }

/* ============================================================
   MOTION KEYFRAMES (importable)
   ============================================================ */
@keyframes aeq-drop {
  0%   { transform: translateY(-14px) rotate(-6deg); opacity: 0; }
  18%  { opacity: 1; }
  55%  { transform: translateY(0) rotate(0); }
  65%  { transform: translateY(-3px); }
  78%, 100% { transform: translateY(0); }
}
@keyframes aeq-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.45); opacity: .55; }
}
@keyframes aeq-focus {
  0%   { transform: scale(1.4); opacity: 0; }
  60%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

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