/* VanPay tokens. Six colours per ground, two faces. Everything else derives. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* VanPay side: the light ground that wins. */
  --sc-canvas:     #F3F5F8;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #10141C;
  --sc-ink-soft:   #4B5567;
  --sc-accent:     #2859D7;
  --sc-accent-ink: #FFFFFF;
  --sc-shadow-color: 220 30% 30%;

  /* Card side, also exposed for the grounds layer and divider. */
  --card-canvas:  #0B0E14;
  --card-surface: #141A26;
  --card-ink:     #EEF2F8;
  --card-soft:    #9AA6B8;
  --card-accent:  #7FA6FF;
  --vp-canvas:    #F3F5F8;

  /* The brand mark blue. Mark and linework only, never body text. */
  --vp-mark: #2F6FFF;

  --sc-font-display: "Archivo", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --split: 0.5;
  --close: 0;
  color-scheme: light;
}

.side--card {
  --sc-canvas:     var(--card-canvas);
  --sc-surface:    var(--card-surface);
  --sc-ink:        var(--card-ink);
  --sc-ink-soft:   var(--card-soft);
  --sc-accent:     var(--card-accent);
  --sc-accent-ink: var(--card-canvas);
  --sc-shadow-color: 222 45% 3%;
  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent);
  color: var(--sc-ink);
  color-scheme: dark;
}
.side--vp {
  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  color: var(--sc-ink);
}

/* Variant B: the past side ages. Three fixed era palettes, swapped at the era
   jumps (never interpolated, so text contrast is always a checked pair).
   split.js sets data-palette="parchment|dusk|dark" on <html> when
   data-ground="aged" is present. */
html[data-ground="aged"][data-palette="parchment"] .side--card,
html[data-ground="aged"][data-palette="parchment"] {
  --card-canvas:  #E9DFC9;
  --card-surface: #F2EAD8;
  --card-ink:     #241E16;
  --card-soft:    #5C5243;
  --card-accent:  #1F4FBF;
}
html[data-ground="aged"][data-palette="dusk"] .side--card,
html[data-ground="aged"][data-palette="dusk"] {
  --card-canvas:  #3A3127;
  --card-surface: #463C31;
  --card-ink:     #F3EBDD;
  --card-soft:    #C8BBA6;
  --card-accent:  #9DB8FF;
}
html[data-ground="aged"] .side--card { color-scheme: light; }
html[data-ground="aged"][data-palette="dusk"] .side--card,
html[data-ground="aged"][data-palette="dark"] .side--card { color-scheme: dark; }