/* VanPay "Glass trail" tokens. One family (Inter, opsz axis), dark-first,
   one accent. Values follow the researched product-page scale. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Future side (right): deep ground with ambient accent light. */
  --sc-canvas:     #050810;
  --sc-surface:    #11151f;
  --sc-ink:        #F5F5F7;
  --sc-ink-soft:   #9A9FAB;   /* tinted grey, 6.9:1 on canvas */
  --sc-accent:     #5B86F0;   /* accent-hi for text/lines on dark, 6.1:1 */
  --sc-accent-ink: #050810;
  --sc-shadow-color: 225 60% 2%;

  /* Past side (left): matte void. */
  --card-canvas:  #000000;
  --card-surface: #141416;
  --card-ink:     #F5F5F7;
  --card-soft:    #86868B;    /* 5.9:1 on #000 */
  --card-accent:  #B0B3BA;    /* the past has no colour */

  /* Light close (arrival into daylight). */
  --light-canvas: #F5F5F7;
  --light-surface: #FFFFFF;
  --light-ink:    #1D1D1F;
  --light-soft:   #6E6E73;    /* 5.3:1 on #F5F5F7 */

  --vp-blue:      #2859D7;    /* CTA fill, mark, light-section accent */
  --vp-blue-lo:   #1C3FA3;
  --vp-glow:      rgba(40, 89, 215, 0.35);

  --sc-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale: desktop / ≤1068 / ≤734 */
  --t-hero:    clamp(3rem, 1.2rem + 6.2vw, 6rem);      /* 48 → 96 */
  --t-super:   clamp(3rem, 1.4rem + 5vw, 5rem);        /* 48 → 80 */
  --t-head:    clamp(2rem, 1.3rem + 2.2vw, 3rem);      /* 32 → 48 */
  --t-sub:     clamp(1.1875rem, 1rem + 0.7vw, 1.75rem);/* 19 → 28 */
  --t-lead:    clamp(1.1875rem, 1.1rem + 0.2vw, 1.3125rem);
  --t-body:    1.0625rem;                               /* 17 */
  --t-caption: 0.875rem;                                /* 14 */

  --ease-fade:  cubic-bezier(0.4, 0, 0.6, 1);
  --ease-stage: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-ui:    cubic-bezier(0.25, 0.1, 0.25, 1);

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

.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-hairline:        rgba(255, 255, 255, 0.12);
  --sc-hairline-strong: rgba(255, 255, 255, 0.22);
  color: var(--sc-ink);
}
.side--vp {
  --sc-hairline:        rgba(255, 255, 255, 0.12);
  --sc-hairline-strong: rgba(255, 255, 255, 0.22);
  color: var(--sc-ink);
}
/* The close arrives in daylight: builder D applies .is-light on the close stage. */
.is-light {
  --sc-canvas:     var(--light-canvas);
  --sc-surface:    var(--light-surface);
  --sc-ink:        var(--light-ink);
  --sc-ink-soft:   var(--light-soft);
  --sc-accent:     var(--vp-blue);
  --sc-accent-ink: #FFFFFF;
  --sc-hairline:        #D2D2D7;
  --sc-hairline-strong: #B8B8BF;
  color: var(--sc-ink);
  color-scheme: light;
}