/* Checkup brand tokens. Source: relaunch/BRAND.md (rev. 3). Day only: no dark theme (founder).
   Contract names are read by glass.js / tiles / backdrop. */
:root {
  color-scheme: light;

  /* surfaces */
  --canvas: #D9D9D9;                       /* contract */
  --canvas-dot: rgba(13, 13, 13, .10);
  --panel: #FFFFFF;                        /* contract: glass paper base, solid tier */
  --row: #F2F2F2;                          /* contract: secondary solids */
  --fill: rgba(255, 255, 255, .62);        /* inner reading fills: rows, fields, cards inside glass */
  --fill-hover: rgba(255, 255, 255, .82);
  --plate: rgba(255, 255, 255, .84);       /* label plates and chips over game canvases */
  --stage: #EEEBFA;                        /* lavender-white ground under game canvases (GAMES.md "bright arcade") */
  --dark: #0D0D0D;                         /* contract (glass.js reads it): small ink details only, never a surface */

  /* ink */
  --ink: #0D0D0D;                          /* contract */
  --muted: #56565B;                        /* contract: only on --fill (5.7:1 worst case) */
  --ink-3: #616166;                        /* meta / legal, >= 12px, on --fill */
  --line: rgba(13, 13, 13, .10);
  --dash: rgba(13, 13, 13, .45);
  --focus: #0D0D0D;

  /* the accent family (founder, final): Lavender is the UI signature, Electric is the deep tone */
  --accent: #B4A0FF;                       /* contract: pills, buttons, active toggles, highlights; BLACK text on it */
  --accent-bright: #C9B8FF;                /* hover */
  --accent-press: #9F88F5;                 /* pressed */
  --accent-ink: #0D0D0D;                   /* contract: text on --accent (9.6:1) */
  --accent-deep: #8400FF;                  /* Electric: logo tile, app icon, game worlds, win flash, accent text on white (6.1:1) */
  --accent-deep-ink: #FFFFFF;              /* text on --accent-deep */
  --accent-glow: rgba(180, 160, 255, .45); /* the old site's lavender glow, for soft blooms only */
  --accent-soft: #B4A0FF;                  /* alias kept for older code */
  --accent-edge: rgba(0, 0, 0, 0);
  --win: #8400FF;                          /* contract: canvas result flash (deep tone), <= 400ms */
  --loss: #8A8A90;                         /* contract: canvases only */

  /* backdrop bodies (documentation; backdrop.js reads the core tokens; art direction in GAMES.md) */
  --bd-ink: #141416;
  --bd-paper: #F7F7F7;
  --bd-stroke: rgba(13, 13, 13, .85);      /* decals: numbers, laces, seams */
  --bd-shadow: rgba(13, 13, 13, .14);
  --bd-dots: rgba(13, 13, 13, .38);        /* frame dots, Physics view only */

  /* liquid glass (contract: read by glass.js; glass.css fallbacks) */
  --glass-tint: rgba(255, 255, 255, .50);
  --glass-tint-dark: rgba(13, 13, 13, .80); /* read by glass.js; unused on the site (no dark surfaces) */
  --glass-blur: 16px;
  --glass-refraction: .6;                  /* 0..1, bevel-band bend */
  --glass-rim: .9;                         /* 0..1 */
  --glass-dispersion: .15;                 /* 0..1, hairline fringe at the rim only */
  --glass-bevel: 18px;                     /* glass.js scale reference: panel band = KINDS.panel.bevel (14) x this / 18 = 14px */
  --light-angle: 225deg;                   /* rim key light (top-left, same as the tiles); motion.js swings it */
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -18px rgba(0, 0, 0, .24);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, .14), 0 28px 56px -22px rgba(0, 0, 0, .55);
  --shadow-pill: 0 1px 2px rgba(13, 13, 13, .12), 0 10px 24px -10px rgba(132, 96, 255, .55);

  /* shape + space */
  --radius-panel: 22px;                    /* contract */
  --radius-tile: 18px;                     /* contract */
  --radius-row: 14px;
  --radius-inner: 12px;
  --radius-pill: 9999px;
  --gutter: 10px;                          /* contract */
  --margin: 16px;
  --pad: 16px;
  --pad-lg: 20px;
  --col-left: clamp(400px, 33vw, 480px);

  /* type */
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;   /* contract */
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace; /* contract */
  --fs-h1: clamp(34px, 3.6vw, 52px);
  --fs-h2: 28px;
  --fs-intro: 20px;
  --fs-body: 16px;
  --fs-pill: 17px;
  --fs-chip: 10.5px;

  /* motion: cubic-bezier fallbacks. motion.js overwrites the --ease-* values with spring linear() where supported. */
  --ease-snap: cubic-bezier(.2, 0, .12, 1);   --dur-snap: .49s;
  --ease-pill: cubic-bezier(.25, .1, .2, 1.04); --dur-pill: .66s;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --dur-pop: .85s;
  --ease-glide: cubic-bezier(.16, 1, .3, 1);   --dur-glide: .6s;
  --ease-panel: cubic-bezier(.3, 0, .18, 1.05); --dur-panel: .78s;
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* No Night blocks: the site is Day only, whatever the system preference (founder: no dark backgrounds). */

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-tint: var(--panel); --glass-refraction: 0; --glass-dispersion: 0; --fill: var(--panel); --plate: var(--panel); }
}
@media (prefers-contrast: more) {
  :root { --glass-tint: var(--panel); --glass-refraction: 0; --muted: var(--ink); --dash: var(--ink); }
}
@media (max-width: 767px) {
  :root { --margin: 12px; --fs-h2: 24px; --fs-intro: 17px; --fs-pill: 15px; --col-left: 100%; }
}

html { background: var(--canvas); }
body {
  margin: 0; color: var(--ink); font: 400 var(--fs-body)/1.5 var(--font-sans);
  background-color: var(--canvas);
  background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* --accent stays hex (JS/canvas parse it). CSS fills use --accent-fill. */
:root { --accent-fill: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); color: var(--ink); }