/* Reikan design tokens — ports to Shopify custom.css as-is. */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --pfc { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mxn { syntax: "<number>"; inherits: true; initial-value: 50; }
@property --myn { syntax: "<number>"; inherits: true; initial-value: 50; }

:root {
  --void: #0A0A0F;
  --ink: #12121A;
  --ghost: #F5F5F2;
  --psychic: #7C6CFF;
  --jade: #3DDC97;      /* money-positive only */
  --ember: #FF8A3C;     /* micro-emphasis only */
  --dim: #8A8A96;
  --hairline: #1E1E28;
  --psychic-bright: #948AFF;
  --edge: #34343f;
  --panel-hi: #16161f;
  --panel-mid: #171722;
  --panel-lo: #0e0e16;
  --panel-art-a: #191926;
  --panel-art-b: #1a1a28;
  --panel-flat: #10101a;
  --slot-line: #232330;
  --glint-tint: #CFC6FF;
  --foil: conic-gradient(from 180deg, #7C6CFF, #3DDC97, #FF8A3C, #7C6CFF);
  --abyss: #07070B;                                  /* stage pedestals */
  --spot: rgba(124, 108, 255, 0.16);                 /* stage spotlight */
  --scrim: linear-gradient(180deg, transparent 34%, rgba(7, 7, 11, 0.74) 64%, rgba(7, 7, 11, 0.96));
  /* --dim over card art measured 3.22:1 at 390px against a stated 4.5:1
     rule. Placards laid over artwork get their own lighter value. */
  --placard-art: #CBCBD4;
  --holo-foil: repeating-linear-gradient(112deg,
    #ec9bb6 0%, #ccac6f 8%, #69e4a5 16%, #8ec5d6 24%, #b98cce 32%, #ec9bb6 40%);
  --lift: 0 10px 28px color-mix(in srgb, var(--psychic) 26%, transparent);

  --font-display: "Space Grotesk", "SG Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JBM Fallback", ui-monospace, monospace;

  /* 8pt rhythm */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s6: 3rem; --s8: 4rem; --s12: 6rem; --s16: 8rem;

  --text-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-sub: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  --text-display: clamp(2.75rem, 1.7rem + 5vw, 5.5rem); /* >=3x body */
  --text-h2: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem);
  --text-set-h1: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  --text-stat: clamp(1.6rem, 1.2rem + 2.2vw, 2.4rem);
  --text-label: 0.72rem;
  --text-placard: 0.68rem;
  --text-micro: 0.66rem;
  --text-rate: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  --card-w: clamp(170px, 22vw, 270px);
  --card-w-rail: clamp(200px, 56vw, 250px);
  --crop: 14%;   /* set-tile cover crop line. No per-tile override exists:
                    data-crop was specced and never built (2026-08-20 audit). */
  --wrap-wide: 80rem;

}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jbmono.woff2") format("woff2");
  font-weight: 100 800; font-display: swap;
}
@font-face {
  font-family: "Reikan JP";
  src: url("../fonts/reikan-jp.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+970A, U+611F;
}

/* metrics-matched fallbacks: text holds its box while woff2 swaps in (CLS ~0) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "SG Fallback";
  src: local("Arial");
  size-adjust: 100.5%; ascent-override: 98%; descent-override: 29%; line-gap-override: 0%;
}
@font-face {
  font-family: "JBM Fallback";
  src: local("Courier New");
  size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%;
}