@layer tokens {
  :root {

  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    /* Top-left light */
    1px 2px 3px hsl(var(--shadow-color) / 0.20),
    2px 5px 8px hsl(var(--shadow-color) / 0.16),
    3px 8px 14px hsl(var(--shadow-color) / 0.12),
    
    /* Top-right light */
    -1px 2px 3px hsl(var(--shadow-color) / 0.20),
    -2px 5px 8px hsl(var(--shadow-color) / 0.16),
    -3px 8px 14px hsl(var(--shadow-color) / 0.12);

  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);

    /* ---- brand ---- */
    --brand: 34, 113, 177;
    --brand-50: 233, 243, 251;
    --brand-100: 212, 231, 247;
    --brand-200: 168, 207, 240;
    --brand-300: 125, 183, 232;
    --brand-400: 81, 159, 225;
    --brand-500: 38, 135, 217;
    --brand-600: 27, 91, 142;
    --brand-700: 19, 66, 100;
    --brand-800: 12, 43, 64;
    --brand-900: 6, 21, 37;
    --link: 144, 184, 216;
    --code: 222, 234, 243;

    --brand-fleet: #C2C3A3;
    --brand-fleet-rgb: 194,195,163;

    /* ---- feedback (priority/severity) ---- */
    --good: #33821C;
    --good-soft: #f0fff4;
    --good-rgb: 51, 130, 28;
    --good-fg : #4fc92b;
    --warn: #d3910c;
    --warn-soft: #fffbea;
    --warn-rgb: 211, 145, 12;
    --warn-fg: #ffb728;
    --bad: #f2450b;
    --bad-soft: #fef2f2;
    --bad-rgb: 242, 69, 11;
    --bad-fg: #ff4a0d;
    --unknown: #64748b;
    --unknown-soft: #f1f5f9;
    --unknown-rgb: 100, 116, 139;
    --unknown-fg: #94a3b8;
    --info: #2271b1;
    --info-soft: #eff6ff;
    --info-rgb: 34, 113, 177;

    /* ---- accuracy/confidence (cool spectrum) ---- */
    --accuracy-direct: #1aa6a6;
    --accuracy-direct-soft: #e6f7f7;
    --accuracy-inferred: #4b6ad0;
    --accuracy-inferred-soft: #eef2fb;
    --accuracy-experimental: #64748b;
    --accuracy-experimental-rgb: rgb(100, 116, 139);
    --accuracy-experimental-soft: #f1f5f9;

    /* ---- neutrals ---- */
    --ink: #1d2327;
    --ink-2: #2c3338;
    --muted: #999;
    --border-subtle: #dcdcde;

    --ui-0: #ffffff;
    --ui-1: #f6f7f7;
    --ui-2: #e9e9e9;
    --ui-3: #dcdcde;
    --ui-4: #16181a;

    /* ---- radii ---- */
    --r-xs: 2px;
    --r-sm: 2px;
    --r-md: 2px;
    --r-lg: 2px;
    --r-xl: 2px;
    --r-pill: 999px;

    /* ---- spacing ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    /* ---- typography ---- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-20: 20px;

    /* ---- shadows ---- */
    --card-shadow: 0 5px 0 rgba(0, 0, 0, 0.05);

    /* ---- glass overlays (white transparency) ---- */
    --glass-06: rgba(255, 255, 255, 0.06);
    --glass-10: rgba(255, 255, 255, 0.1);
    --glass-15: rgba(255, 255, 255, 0.15);
    --glass-20: rgba(255, 255, 255, 0.2);
    --glass-25: rgba(255, 255, 255, 0.25);
    --glass-50: rgba(255, 255, 255, 0.5);

    /* ---- scrim overlays (black transparency) ---- */
    --scrim-20: rgba(0, 0, 0, 0.2);
    --scrim-40: rgba(0, 0, 0, 0.4);

    /* ---- inverse colors (for dark backgrounds) ---- */
    --ink-inverse: #fff;
  }
}