/* Cool Plus Design System — generated from tokens.json */
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Thai";src:url("fonts/IBMPlexSansThai-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Thai";src:url("fonts/IBMPlexSansThai-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Thai";src:url("fonts/IBMPlexSansThai-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Thai";src:url("fonts/IBMPlexSansThai-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root, [data-theme="light"] {
  --brand-900: #0b2233;
  --brand-700: #174862;
  --brand-500: #2b7a9b;
  --brand-100: #dcedf3;
  --on-brand: #ffffff;
  --on-brand-muted: #a9c3d2;
  --action: #0b2233;
  --action-hover: #174862;
  --on-action: #ffffff;
  --link: #1a5f80;
  --surface-50: #f3f5f7;
  --surface-0: #ffffff;
  --surface-100: #e9edf1;
  --line: #d6dde3;
  --line-strong: #7d8b97;
  --ink: #111a21;
  --ink-2: #3b4854;
  --ink-3: #5b6976;
  --ink-disabled: #9aa6b0;
  --focus: #1d63c9;
  --ok: #1c7a4a;
  --ok-ink: #14603a;
  --ok-soft: #e2f3e9;
  --warn: #b07d00;
  --on-ok: #ffffff;
  --on-warn: #2a1d00;
  --warn-ink: #7a5000;
  --warn-soft: #fff2d1;
  --crit: #c42f29;
  --on-crit: #ffffff;
  --crit-ink: #a11f1a;
  --crit-soft: #fbe5e3;
  --info: #1d63c9;
  --info-ink: #16509f;
  --info-soft: #e3edfa;
  --idle: #7a8692;
  --idle-ink: #4c5864;
  --idle-soft: #edf0f3;
  --data-actual: #111a21;
  --data-budget: #9aa6b0;
  --data-forecast: #2b7a9b;
  --data-cash: #0f6b6b;
  --shadow-pop: 0 8px 24px rgba(11,34,51,0.16), 0 1px 2px rgba(11,34,51,0.12);
}
[data-theme="dark"] {
  --brand-900: #0a1b28;
  --brand-700: #1d5573;
  --brand-500: #5fb0cf;
  --brand-100: #13303f;
  --on-brand: #e8f1f5;
  --on-brand-muted: #8fb0c3;
  --action: #8ccbe2;
  --action-hover: #a9daeb;
  --on-action: #0b2233;
  --link: #7cc3dd;
  --surface-50: #0d151c;
  --surface-0: #131d26;
  --surface-100: #1a2631;
  --line: #26333f;
  --line-strong: #6b7b88;
  --ink: #e6ecf1;
  --ink-2: #b4c0ca;
  --ink-3: #8d9aa6;
  --ink-disabled: #55626e;
  --focus: #8ab8f5;
  --ok: #4cc086;
  --ok-ink: #7fd6a8;
  --ok-soft: #11291d;
  --warn: #e9b949;
  --on-ok: #04170d;
  --on-warn: #1c1300;
  --warn-ink: #f0c96b;
  --warn-soft: #2e2410;
  --crit: #f06a62;
  --on-crit: #1f0705;
  --crit-ink: #ff9a92;
  --crit-soft: #371614;
  --info: #6ea6f2;
  --info-ink: #a3c6f7;
  --info-soft: #14233a;
  --idle: #6c7a86;
  --idle-ink: #a6b2bc;
  --idle-soft: #1c2731;
  --data-actual: #e6ecf1;
  --data-budget: #5d6c78;
  --data-forecast: #5fb0cf;
  --data-cash: #4fc1bd;
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --row-compact: 28px;
  --row-comfortable: 36px;
  --control-h: 32px;
  --touch-min: 48px;
  --nav-rail: 72px;
  --health-seg: 8px;
  --grid-columns: 12;
  --grid-gutter: 16px;
  --content-max: 1680px;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, monospace;
}
.display { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; }
.h1 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.h2 { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }
.h3 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.label-caps { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 600; }
.compact { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.metric { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.figure { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
.eng-value { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 500; }
.code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }