/* TracQR tokens: Hallmark Riso, re-pointed at the app's own palette (see the stamp in style.css). */
:root {
  /* Palette override: the blue drum is TracQR indigo, the pink drum is the TracQR highlight. */
  --brand-indigo: #211D63;
  --brand-pink: #FF7FB8;

  /* Black ground, as on jgeee.com/jamvote and /divello: near-black paper, white type, a white App Store
     button, and the app's own pink kept for highlights. */
  --color-paper: #0B0C0E;
  --color-paper-2: #17181C;
  --color-paper-3: #23252B;
  --color-ink: #F4F5F7;
  --color-ink-2: #C9CCD3;
  --color-muted: #9AA0AA;
  --color-rule: #2A2C33;
  --color-accent: var(--brand-pink);
  --color-accent-hover: color-mix(in oklab, var(--brand-pink) 82%, var(--color-ink));
  --color-accent-ink: var(--color-paper);
  --color-button: var(--color-ink);
  --color-button-hover: #DADCE1;
  --color-button-ink: var(--color-paper);
  --color-focus: var(--brand-pink);

  /* The hero and the close sit on the same black ground. */
  --color-field: var(--color-paper);
  --color-on-field: var(--color-ink);
  --color-on-field-muted: var(--color-muted);
  --color-focus-on-field: var(--brand-pink);

  /* The wallet's card drums, as the app prints them. */
  --card-indigo: #5856D6;
  --card-raspberry: #C2185B;
  --card-green: #0F7B5F;
  --card-amber: #B4530F;
  --card-blue: #1D5FD1;
  --color-on-card: #FFFFFF;

  /* Type */
  --font-display: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Literata", ui-serif, Georgia, serif;
  --display-weight: 800;
  --tracking-display: -0.025em;

  --text-sm: 0.875rem;
  --text-md: 1.0625rem;
  --text-lead: clamp(1.1875rem, 1.08rem + 0.35vw, 1.3125rem);
  --text-title: clamp(1.375rem, 1.2rem + 0.55vw, 1.5625rem);
  --text-card: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  --text-section: clamp(2.25rem, 1.45rem + 2.4vw, 3.25rem);
  --text-display-s: clamp(2.75rem, 1.7rem + 3.2vw, 3.75rem);
  --text-display: clamp(3rem, 1.6rem + 4.6vw, 5.25rem);
  --text-figure: clamp(5rem, 2.6rem + 8vw, 9rem);

  /* Space */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;
  --section-gap-s: clamp(4.5rem, 2.6rem + 5.4vw, 7.5rem);
  --section-gap: clamp(5rem, 2.4rem + 7.2vw, 9rem);
  --section-gap-l: clamp(5.5rem, 2rem + 9.4vw, 11rem);

  /* Canvas */
  --container: 1440px;
  --gutter: clamp(1rem, 0.2rem + 4.2vw, 4rem);
  --gap-columns: clamp(1rem, 0.4rem + 1.6vw, 2rem);
  --nav-height: 72px;

  /* Surfaces */
  --radius-card: 2px;
  --radius-pill: 2px;
  --radius-wallet: 18px;
  --rule-hair: 1px;
  --rule-frame: 1.5px;
  --texture-opacity: 0;
  --shadow-card: none;

  /* Motion */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layers */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}