/* ============================================================
   Metal Stack — design tokens · "Assay House" system
   Display: Fraunces (engraved-certificate serif)
   UI/body: Schibsted Grotesk · Data/serials: IBM Plex Mono
   ============================================================ */

/* Fonts are loaded via <link rel="preconnect"> + <link rel="stylesheet"> in each page head
   (layout.tsx FONTS_HREF) — a CSS @import here would serialize the requests and block render. */

:root {
  /* type */
  --serif: 'Fraunces', Georgia, serif;
  --grot:  'Schibsted Grotesk', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', monospace;

  /* vault inks */
  --ink:        #07080B;
  --ink-2:      #0B0D12;
  --ink-3:      #10131A;
  --ink-4:      #151922;

  /* certificate paper */
  --paper:      #F6F1E6;
  --paper-2:    #ECE5D5;
  --paper-ink:  #19283b;
  --paper-mut:  #5d6b7d;

  /* metals + signal */
  --gold:       #E2B438;
  --gold-lt:    #F6E6AD;
  --gold-dp:    #8A6A2A;
  --volt:       #C6FF4A;   /* the live / verified signal LED */
  --volt-deep:  #8fd622;
  --amber:      #FFB43C;   /* inconclusive */
  --red:        #FF6B6B;   /* not consistent */
  --steel:      #C9D2DC;

  /* hairlines + text */
  --hair:       rgba(232,228,214,.085);
  --hair-2:     rgba(232,228,214,.16);
  --text:       #F2EFE6;
  --muted:      #9AA0AB;
  --faint:      rgba(242,239,230,.42);

  /* ---- legacy aliases — existing markup/inline styles still reference these ---- */
  --stack-black:    var(--ink);
  --stack-graphite: var(--ink-2);
  --stack-steel:    #2A2D34;
  --stack-silver:   var(--steel);
  --stack-mist:     var(--text);
  --stack-volt:     var(--volt);
  --stack-gold:     var(--gold);
  --stack-line:     #20242E;
  --stack-text:     var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* foil text — metallic gradient with a slow light-sweep */
.foil {
  background: linear-gradient(100deg,var(--gold-dp) 0%,var(--gold-lt) 22%,#fff7e0 33%,var(--gold-lt) 44%,var(--gold) 60%,var(--gold-dp) 100%);
  background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ms-sweep 7s ease-in-out infinite;
}
.foil-silver, .foil-s {
  background: linear-gradient(100deg,#7E8794 0%,#FAFCFE 26%,#fff 36%,#C9D2DC 50%,#7E8794 100%);
  background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ms-sweep 9s ease-in-out infinite;
}
.foil-gold { /* legacy alias */
  background: linear-gradient(135deg,#E9D9A3 0%,#C5A560 35%,#8E6E2E 55%,#E9D9A3 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes ms-sweep { 0%{background-position:120% 0} 50%{background-position:-30% 0} 100%{background-position:120% 0} }
@media (prefers-reduced-motion: reduce) { .foil, .foil-silver, .foil-s { animation: none; } }