@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Core surfaces */
  --bg:            #0a0a0d;
  --surface:       #111115;
  --surface-raised:#16161c;
  --surface-head:  #18181f;
  --surface-sunk:  #0d0d11;
  --field:         #1a1a22;
  --field-alt:     #1c1c25;

  /* ---- borders / dividers ---- */
  --border:        #22222b;
  --border-strong: #2a2a34;
  --border-hi:     #32323d;
  --divider:       #191921;
  --slash:         #383843;

  /* ---- text ---- */
  --text:          #f4f2f9;
  --text-strong:   #edeaf5;
  --text-body:     #e8e6ef;
  --text-2:        #bdbbc8;
  --num:           #b2b0bb;
  --muted:         #8c8a96;
  --muted-2:       #82808c;
  --faint:         #7a7885;
  --faint-2:       #72707d;
  --faintest:      #64626d;
  --faintest-2:    #55535e;

  /* Brand accent */
  --accent:        #9b8cf0;
  --accent-ink:    #12101e;
  --accent-tint:   #1f1d2e;
  --accent-chip:   #242137;
  --accent-chip-bd:#383152;
  --accent-a22:    rgba(155,140,240,0.22);
  --accent-a30:    rgba(155,140,240,0.30);

  /* ---- semantic: poker value scale ---- */
  --pos:           #6fc093;
  --pos-bar:       #41815a;
  --pos-tint:      rgba(111,192,147,0.12);
  --pos-tint-bd:   rgba(111,192,147,0.30);
  --neg:           #e0758a;
  --neg-bar:       #9e445a;
  --neg-tint:      rgba(224,117,138,0.13);
  --neg-tint-bd:   rgba(224,117,138,0.32);
  --owes:          #e8829a;
  --owes-tint:     rgba(232,130,154,0.15);
  --owes-tint-bd:  rgba(232,130,154,0.40);

  /* ---- semantic: cash-movement hues ---- */
  --warn:          #e0b15c;
  --warn-tint:     rgba(224,177,92,0.13);
  --warn-tint-bd:  rgba(224,177,92,0.32);
  --rolled:        #8f93c2;

  /* ---- medals ---- */
  --rank-1: var(--accent);
  --rank-2: #c2bcd0;
  --rank-3: #a78bb0;

  /* ---- chart line palette (top-N order) ---- */
  --line-1: #9b8cf0; --line-2: #6fc093; --line-3: #e0b15c;
  --line-4: #cf6f86; --line-5: #8f93c2;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 3px 12px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.24);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.38), 0 3px 10px rgba(0,0,0,.26);
  --shadow-xl: 0 18px 48px rgba(0,0,0,.46), 0 6px 18px rgba(0,0,0,.30);

  /* ---- glass panel effect ---- */
  --glass-border: 1px solid rgba(255,255,255,.055);
  --glass-bg:     rgba(255,255,255,.02);

  /* ---- spacing scale (4pt) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* ---- radii ---- */
  --r-pill:5px; --r-sm:7px; --r-md:9px; --r-lg:12px;

  /* ---- containers ---- */
  --w-public:1320px;
  --w-session:1440px;
  --w-admin:1580px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---- Chart.js backward compat (read as raw strings by JS) ---- */
  --text-muted: #bdbbc8;
  --line: #22222b;
}