/* teamgap Ledger — generated from tokens.json. Light is the default; set data-theme="dark" on <html> for dark. */

:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F5F6F8;
  --panel: rgba(255, 255, 255, 0.58);
  --panel-solid: #FFFFFF;
  --raised: #EEF0F3;
  --sunken: #E2E5EA;
  --lens: rgba(20, 23, 28, 0.07);
  --line: rgba(20, 30, 50, 0.09);
  --line-strong: rgba(20, 30, 50, 0.18);
  --ink: #14171C;
  --ink-2: #4F5661;
  --ink-3: #646D78;
  --brass: #8A6200;
  --brass-soft: rgba(138, 98, 0, 0.10);
  --on-brass: #FFFFFF;
  --side-blue: #1E5FCC;
  --side-blue-soft: rgba(30, 95, 204, 0.14);
  --side-red: #BF3D22;
  --side-red-soft: rgba(191, 61, 34, 0.13);
  --ahead: #137A4B;
  --ahead-soft: rgba(19, 122, 75, 0.12);
  --behind: #B8304F;
  --behind-soft: rgba(184, 48, 79, 0.11);
  --win: var(--ahead);
  --loss: var(--behind);
  --glow-a: var(--brass);
  --glow-b: var(--side-blue);
  --shadow-panel: inset 0 1px 0 #FFFFFF, 0 24px 60px -32px rgba(30, 40, 70, 0.35);
  --shadow-lens: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px -8px rgba(30, 40, 70, 0.28);
  --shadow-menu: 0 18px 48px -12px rgba(30, 40, 70, 0.35);
  --focus-ring: 0 0 0 2px #F5F6F8, 0 0 0 4px #8A6200;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1013;
  --panel: rgba(19, 22, 26, 0.55);
  --panel-solid: #13161A;
  --raised: #1A1E23;
  --sunken: #252A31;
  --lens: rgba(232, 234, 237, 0.10);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #E8EAED;
  --ink-2: #9BA1AA;
  --ink-3: #7E858F;
  --brass: #E3B34C;
  --brass-soft: rgba(227, 179, 76, 0.14);
  --on-brass: #16120A;
  --side-blue: #6AA6FF;
  --side-blue-soft: rgba(106, 166, 255, 0.20);
  --side-red: #FF8466;
  --side-red-soft: rgba(255, 132, 102, 0.18);
  --ahead: #4CC38A;
  --ahead-soft: rgba(76, 195, 138, 0.16);
  --behind: #F2708A;
  --behind-soft: rgba(242, 112, 138, 0.15);
  --win: var(--ahead);
  --loss: var(--behind);
  --glow-a: var(--brass);
  --glow-b: var(--side-blue);
  --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --shadow-lens: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 18px 48px -12px rgba(0, 0, 0, 0.85);
  --focus-ring: 0 0 0 2px #0E1013, 0 0 0 4px #E3B34C;
}

:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;
  --space-40: 40px;
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  --glass-filter: blur(30px) saturate(1.6);
  --glow-blur: 90px;
  --glow-opacity: 0.2;
  --lift: -3px;
}

.type-title { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.type-heading { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.type-body { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 400; }
.type-body-strong { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 500; }
.type-meta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.type-label-caps { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.type-stat-xl { font-family: var(--font-mono); font-size: 40px; line-height: 42px; font-weight: 500; letter-spacing: -0.03em; }
.type-stat { font-family: var(--font-mono); font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -0.02em; }
.type-stat-sm { font-family: var(--font-mono); font-size: 18px; line-height: 22px; font-weight: 500; }
.type-num { font-family: var(--font-mono); font-size: 13px; line-height: 19px; font-weight: 400; }
.type-num-sm { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 400; }