/* ============================================================================
   Animica Design System — "Entangled duotone on a vacuum field"
   ----------------------------------------------------------------------------
   One shared visual language for every Animica front-end (animica.org, explorer,
   pool, animica.xyz, console, studio, wallet, aicf, evm). Grounded in Animica's
   world: post-quantum lattices + VERIFIABLE quantum randomness + decentralized AI.

   Identity rules (what keeps it non-templated):
   - The accent is a CORRELATED PAIR (wave ↔ collapse), never a single acid color
     — an entanglement metaphor, not the default "one neon on black".
   - `live` (verify-green) appears ONLY on verified/live state (beacon, "verify ✓").
   - Mono is INFORMATION: every hash/address/entropy value is set in Plex Mono.
   - The hash-chain "spine" is a structural device, not decoration.

   Portable: pure CSS custom properties + a few primitives. Each site imports this
   (or copies it) and builds on the tokens. Self-host IBM Plex for production; the
   @import below is a privacy-friendly fallback.
   ========================================================================== */

@import url('https://fonts.bunny.net/css?family=ibm-plex-sans:400,500,600,700|ibm-plex-mono:400,500,600&display=swap');

:root {
  /* ---- color: vacuum field + lifted surfaces ---- */
  --anm-void:      #0A0E16;   /* base — deep indigo-black, NOT pure black */
  --anm-void-2:    #0C111C;
  --anm-surface:   #131A2B;   /* panels/cards */
  --anm-surface-2: #1A2236;   /* hover / raised */
  --anm-line:      #232C44;   /* hairline borders */
  --anm-line-2:    #2E3958;

  /* ---- text ---- */
  --anm-ink:       #EAEEF9;   /* primary */
  --anm-ink-2:     #AEB7CE;   /* secondary */
  --anm-mute:      #6F7A95;   /* tertiary / captions */

  /* ---- the entangled accent pair (the identity) ---- */
  --anm-wave:      #6EA8FE;   /* probability-blue (measured-low) */
  --anm-collapse:  #B98CFF;   /* measurement-violet (measured-high) */
  --anm-grad:      linear-gradient(110deg, var(--anm-wave), var(--anm-collapse));
  --anm-grad-soft: linear-gradient(110deg, #6EA8FE22, #B98CFF22);

  /* ---- reserved signal: live / verified ONLY ---- */
  --anm-live:      #4FE3B0;
  --anm-warn:      #FFC24B;
  --anm-bad:       #FF6B7A;

  /* ---- type ---- */
  --anm-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --anm-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --anm-font-display: "IBM Plex Sans", var(--anm-font-sans); /* heavy + tight tracking = display */

  /* fluid type scale (clamped) */
  --anm-fs-300: 0.8125rem;                                   /* 13 — captions/data */
  --anm-fs-400: 0.9375rem;                                   /* 15 — body */
  --anm-fs-500: 1.0625rem;                                   /* 17 — lead */
  --anm-fs-600: clamp(1.25rem, 1rem + 1.1vw, 1.6rem);        /* h3 */
  --anm-fs-700: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);       /* h2 */
  --anm-fs-800: clamp(2.4rem, 1.4rem + 4.4vw, 4.5rem);       /* h1 / hero */
  --anm-fs-900: clamp(3rem, 1.2rem + 7vw, 6.5rem);           /* display number */

  --anm-tracking-tight: -0.02em;
  --anm-tracking-wide:  0.16em;     /* eyebrows / labels */

  /* ---- space / radius / depth ---- */
  --anm-radius:    14px;            /* deliberate: soft, not 0, not pill */
  --anm-radius-sm: 9px;
  --anm-radius-lg: 22px;
  --anm-shadow:    0 1px 0 #ffffff0a inset, 0 18px 50px -24px #00030d;
  --anm-glow:      0 0 0 1px #6EA8FE33, 0 8px 40px -12px #6EA8FE40;

  /* ---- motion: "measurement collapse" ---- */
  --anm-ease:      cubic-bezier(.22,.61,.36,1);   /* settle */
  --anm-ease-in:   cubic-bezier(.5,0,.75,0);
  --anm-dur:       .5s;
  --anm-dur-fast:  .22s;

  --anm-maxw: 1140px;
}

/* ============================ base ============================ */
.anm, .anm * { box-sizing: border-box; }
.anm {
  background:
    radial-gradient(1200px 600px at 78% -8%, #6EA8FE12, transparent 60%),
    radial-gradient(900px 520px at 8% 8%, #B98CFF10, transparent 55%),
    var(--anm-void);
  color: var(--anm-ink);
  font-family: var(--anm-font-sans);
  font-size: var(--anm-fs-400);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.anm-wrap { max-width: var(--anm-maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.anm h1, .anm h2, .anm h3 {
  font-family: var(--anm-font-display);
  font-weight: 700; letter-spacing: var(--anm-tracking-tight); line-height: 1.05; margin: 0;
}
.anm h1 { font-size: var(--anm-fs-800); }
.anm h2 { font-size: var(--anm-fs-700); }
.anm h3 { font-size: var(--anm-fs-600); letter-spacing: -0.01em; }

/* eyebrow — structural label, not decoration */
.anm-eyebrow {
  font-family: var(--anm-font-mono); font-size: var(--anm-fs-300); font-weight: 500;
  letter-spacing: var(--anm-tracking-wide); text-transform: uppercase; color: var(--anm-wave);
}
.anm-mono { font-family: var(--anm-font-mono); font-variant-ligatures: none; }
.anm-data { font-family: var(--anm-font-mono); color: var(--anm-ink-2); word-break: break-all; }
.anm-grad-text {
  background: var(--anm-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ============================ primitives ============================ */
.anm-card {
  background: linear-gradient(180deg, #ffffff05, transparent 40%), var(--anm-surface);
  border: 1px solid var(--anm-line);
  border-radius: var(--anm-radius);
  box-shadow: var(--anm-shadow);
}
.anm-card--hover { transition: border-color var(--anm-dur-fast) var(--anm-ease), transform var(--anm-dur-fast) var(--anm-ease); }
.anm-card--hover:hover { border-color: var(--anm-line-2); transform: translateY(-2px); }

.anm-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 var(--anm-fs-400)/1 var(--anm-font-sans);
  padding: .8em 1.25em; border-radius: var(--anm-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--anm-dur-fast) var(--anm-ease), box-shadow var(--anm-dur-fast) var(--anm-ease), background var(--anm-dur-fast);
}
.anm-btn--primary { background: var(--anm-grad); color: #07101f; box-shadow: var(--anm-glow); }
.anm-btn--primary:hover { transform: translateY(-1px); }
.anm-btn--ghost { background: transparent; color: var(--anm-ink); border-color: var(--anm-line-2); }
.anm-btn--ghost:hover { border-color: var(--anm-wave); color: #fff; }

/* verify / live pill — the ONLY place --anm-live is used */
.anm-verify {
  display: inline-flex; align-items: center; gap: .45em;
  font: 600 var(--anm-fs-300)/1 var(--anm-font-mono); letter-spacing: .04em;
  color: var(--anm-live); background: #4FE3B016; border: 1px solid #4FE3B033;
  padding: .35em .7em; border-radius: 999px;
}
.anm-verify::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--anm-live); box-shadow: 0 0 10px var(--anm-live); }

/* hash-chain spine — structural device threading sections */
.anm-spine { position: relative; padding-left: 26px; }
.anm-spine::before {
  content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(var(--anm-wave), var(--anm-collapse), transparent);
  opacity: .5;
}
.anm-spine > * { position: relative; }
.anm-spine > *::before {
  content: ""; position: absolute; left: -21px; top: .55em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--anm-void); border: 1px solid var(--anm-wave);
}

.anm-divider { height: 1px; background: var(--anm-line); border: 0; }

/* ============================ motion ============================ */
/* measurement-collapse reveal: superposed (blurred/offset) -> resolved */
@keyframes anm-collapse-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(.985); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
.anm-reveal { animation: anm-collapse-in var(--anm-dur) var(--anm-ease) both; }
.anm-reveal-2 { animation: anm-collapse-in var(--anm-dur) var(--anm-ease) .08s both; }
.anm-reveal-3 { animation: anm-collapse-in var(--anm-dur) var(--anm-ease) .16s both; }

@media (prefers-reduced-motion: reduce) {
  .anm *, .anm *::before, .anm *::after { animation: none !important; transition: none !important; }
  .anm-reveal, .anm-reveal-2, .anm-reveal-3 { animation: none !important; }
}

/* ============================ quality floor ============================ */
.anm a { color: var(--anm-wave); text-underline-offset: 3px; }
.anm a:hover { color: #fff; }
.anm :focus-visible { outline: 2px solid var(--anm-wave); outline-offset: 2px; border-radius: 4px; }
.anm ::selection { background: #6EA8FE40; color: #fff; }