@layer catlo-tokens {
  :root {
    --catlo-z-overlay: 1100;
    --catlo-z-modal: 1110;

    /* Catlo brand tokens remain canonical and are intentionally not TGDD colors. */
    --catlo-color-primary: #087da4;
    --catlo-color-primary-hover: #066584;
    --catlo-color-primary-soft: #e7f5f9;
    --catlo-color-success: #15803d;
    --catlo-color-warning: #b45309;
    --catlo-color-danger: #b91c1c;
    --catlo-color-focus: #0d9ecc;

    /* Global Design V2 semantic neutrals. */
    --catlo-text-primary: #101828;
    --catlo-text-strong: #1d2939;
    --catlo-text-default: #344054;
    --catlo-text-secondary: #475467;
    --catlo-text-muted: #667085;
    --catlo-text-subtle: #98a2b3;
    --catlo-border-subtle: #eaecf0;
    --catlo-border-default: #d0d5dd;
    --catlo-surface-page: #f2f4f7;
    --catlo-surface-card: #fff;
    --catlo-surface-soft: #f9fafb;

    /* Compatibility aliases used by existing UI Core components. */
    --catlo-color-surface: #fff;
    --catlo-color-surface-soft: #f8fafc;
    --catlo-color-surface-dark: #172033;
    --catlo-color-border: #e2e8f0;
    --catlo-color-border-strong: #cbd5e1;
    --catlo-color-text: #172033;
    --catlo-color-text-muted: #64748b;

    --catlo-font-sans: "Inter", Arial, Helvetica, sans-serif;
    --catlo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --catlo-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    --catlo-font-weight-regular: 400;
    --catlo-font-weight-medium: 500;
    --catlo-font-weight-semibold: 600;
    --catlo-font-weight-bold: 700;
    --catlo-text-xs: 12px;
    --catlo-text-sm: 13px;
    --catlo-text-base: 14px;
    --catlo-text-md: 15px;
    --catlo-text-lg: 16px;
    --catlo-text-xl: 18px;
    --catlo-heading-sm: 20px;
    --catlo-heading-md: 24px;
    --catlo-heading-lg: 30px;
    --catlo-heading-xl: 36px;
    --catlo-font-size-xs: .75rem;
    --catlo-font-size-sm: .875rem;
    --catlo-font-size-md: 1rem;
    --catlo-font-size-lg: 1.25rem;
    --catlo-font-size-xl: 1.75rem;
    --catlo-line-height-tight: 1.25;
    --catlo-line-height-normal: 1.5;

    --catlo-space-1: .25rem;
    --catlo-space-2: .5rem;
    --catlo-space-3: .75rem;
    --catlo-space-4: 1rem;
    --catlo-space-5: 1.25rem;
    --catlo-space-6: 1.5rem;
    --catlo-space-8: 2rem;
    --catlo-space-10: 2.5rem;
    --catlo-space-12: 3rem;

    --catlo-radius-sm: .375rem;
    --catlo-radius-md: .5rem;
    --catlo-radius-lg: .75rem;
    --catlo-radius-pill: 999px;
    --catlo-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --catlo-shadow-md: 0 6px 18px rgba(15, 23, 42, .07);
    --catlo-shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
    --catlo-container-width: 1180px;
    --catlo-container-width-v2: 1200px;
    --catlo-sidebar-width: 312px;
    --catlo-header-height: 72px;
  }
}