/* styles/tokens.css */
/* Card Vault design tokens — see docs/plans/2026-04-25-card-vault-design.md */

:root {
  /* Surface */
  --bg: #050609;
  --surface: #101218;
  --surface-raised: #171A22;
  --surface-hover: #202530;
  --border: #252B36;
  --border-strong: #3A4250;

  /* Text */
  --text: #F4F2EE;
  --text-muted: #A6ACB8;
  --text-faint: #646B78;

  /* Brand & semantic — Theme V8 "Holo" palette pulled from the official
     BulbaBuy POS logo. Pokemon-coded yellow + blue, used decisively rather
     than balanced (the whole point of Holo is intentional choices over
     defaults). Blue is primary interactive (focus rings, links, primary
     CTAs); yellow is the highlight/accent moments (eyebrows, status pops,
     decorative pulls). Semantic colors (positive/negative/warning/info)
     preserved unchanged so functional meaning stays consistent. */
  --brand: #3B4CCA;
  --positive: #36D17B;
  --negative: #FF5C6A;
  --warning: #F5A524;
  --info: #5BC0EB;
  --highlight: #FFCC03;

  /* Type colors (Pokémon) */
  --type-fire: #F08030;
  --type-water: #6890F0;
  --type-grass: #78C850;
  --type-electric: #F8D030;
  --type-psychic: #F85888;
  --type-ice: #98D8D8;
  --type-dragon: #7038F8;
  --type-dark: #705848;
  --type-fairy: #EE99AC;
  --type-fighting: #C03028;
  --type-poison: #A040A0;
  --type-ground: #E0C068;
  --type-flying: #A890F0;
  --type-bug: #A8B820;
  --type-rock: #B8A038;
  --type-ghost: #705898;
  --type-steel: #B8B8D0;
  --type-normal: #A8A878;

  /* Layout / scale (V6 seam — single density today) */
  /* UI scale — global zoom knob. 1.25 = canonical default
     per V4 mock line 29 ("Adam's preferred reading size").
     Settings → Display slider writes here via theme.setUiScale(). */
  --ui-scale: 1.25;
  --font-base: 14px;
  --row-pad: 16px;
  --list-gap: 12px;
  --input-height: 40px;
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --modal-max-width: 960px;

  /* Radii / motion */
  --radius-xs: 6px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;

  /* ----------------------------------------------------------
     Additive tokens carried over from card-vault-mock.html.
     The spec set above is canonical; these extend it without
     conflict for use by views/components ported from the mock.
     ---------------------------------------------------------- */

  /* Brand hover variant — slightly brighter blue for hover states */
  --brand-hover: #4F60DC;
  /* Brand tinted backgrounds — used for focus rings, soft highlights,
     glow halos. Mirrors the .stripe-status / payment-capability-note
     pattern of "use brand color at low opacity for atmosphere." */
  --brand-soft: rgba(59, 76, 202, 0.16);
  --brand-glow: rgba(59, 76, 202, 0.42);
  /* Highlight tinted variants — yellow gets the same soft/glow treatment
     so any surface that wants a yellow personality moment can pull from
     the token system instead of hardcoding rgba values. */
  --highlight-soft: rgba(255, 204, 3, 0.16);
  --highlight-glow: rgba(255, 204, 3, 0.42);

  /* Spacing — strict 4pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Easing curves */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Display type sizes (mock lines 181-194) */
  --font-display-lg: 32px;
  --font-display:    24px;
}