:root {
    /* Core surfaces and text */
    --app-canvas: #f7f5ef;
    --app-surface: #ffffff;
    --app-surface-muted: #f2f5f3;
    --app-surface-subtle: #f8faf9;
    --app-text: #172126;
    --app-text-soft: #687773;
    --app-text-faint: #98a39f;
    --app-line: #d6e2df;
    --app-line-strong: #b9cbc6;

    /* Brand and navigation */
    --app-brand: #0f4c5c;
    --app-brand-dark: #0b3b48;
    --app-brand-deep: #092a31;
    --app-brand-soft: #e5f8f3;
    --app-mint: #b8f2e6;
    --app-nav: #123b45;
    --app-nav-soft: #1b5260;
    --app-nav-text: #d8e8e4;
    --app-nav-muted: #91aaa5;

    /* Shared semantic states */
    --app-amber: #d89b2b;
    --app-amber-soft: #fff3d6;
    --app-danger: #b84d4d;
    --app-danger-soft: #fbedeb;
    --app-success: #348a6d;
    --app-success-soft: #e4f6ef;
    --app-operational: #137a53;
    --app-operational-dark: #0b5d3e;
    --app-operational-soft: #e8f5ef;
    --app-warning: #b96a16;
    --app-info: #476fa8;
    --app-info-soft: #edf3fb;

    /* Fonts and one adjustable typography scale. Changing base shifts every linked size. */
    --app-font-ui: "DM Sans", system-ui, sans-serif;
    --app-font-heading: Manrope, "DM Sans", system-ui, sans-serif;
    --app-font-utility: Inter, "DM Sans", system-ui, sans-serif;
    --app-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --app-type-base: 13px;
    --app-type-shift: calc(var(--app-type-base) - 13px);
    --app-type-9: calc(9px + var(--app-type-shift));
    --app-type-10: calc(10px + var(--app-type-shift));
    --app-type-10-5: calc(10.5px + var(--app-type-shift));
    --app-type-11: calc(11px + var(--app-type-shift));
    --app-type-11-5: calc(11.5px + var(--app-type-shift));
    --app-type-12: calc(12px + var(--app-type-shift));
    --app-type-12-5: calc(12.5px + var(--app-type-shift));
    --app-type-13: var(--app-type-base);
    --app-type-14: calc(14px + var(--app-type-shift));
    --app-type-15: calc(15px + var(--app-type-shift));
    --app-type-16: calc(16px + var(--app-type-shift));
    --app-type-17: calc(17px + var(--app-type-shift));
    --app-type-18: calc(18px + var(--app-type-shift));
    --app-type-19: calc(19px + var(--app-type-shift));
    --app-type-20: calc(20px + var(--app-type-shift));
    --app-type-21: calc(21px + var(--app-type-shift));
    --app-type-22: calc(22px + var(--app-type-shift));
    --app-type-23: calc(23px + var(--app-type-shift));
    --app-type-24: calc(24px + var(--app-type-shift));
    --app-type-25: calc(25px + var(--app-type-shift));
    --app-type-26: calc(26px + var(--app-type-shift));
    --app-type-28: calc(28px + var(--app-type-shift));
    --app-type-30: calc(30px + var(--app-type-shift));
    --app-type-32: calc(32px + var(--app-type-shift));
    --app-type-61: calc(61px + var(--app-type-shift));

    /* Layout */
    --app-sidebar-width: 17rem;
    --app-sidebar-collapsed: 4.25rem;
    --app-sidebar-current: var(--app-sidebar-width);
    --app-topbar-height: 64px;
    --app-content-max: 1680px;
    --app-content-top: 18px;
    --app-content-x: 24px;
    --app-content-bottom: 30px;
    --app-layout-gap: 14px;
    --app-card-head-height: 64px;
    --app-card-head-x: 16px;
    --app-drawer-width: 470px;

    /* Shape and elevation */
    --app-radius-line: 2px;
    --app-radius-2xs: 3px;
    --app-radius-xs: 4px;
    --app-radius-tiny: 5px;
    --app-radius-compact: 6px;
    --app-radius-sm: 7px;
    --app-radius-icon: 8px;
    --app-radius-control: 9px;
    --app-radius-md: 10px;
    --app-radius-comfortable: 11px;
    --app-radius-lg: 12px;
    --app-radius-panel: 13px;
    --app-radius-raised: 14px;
    --app-radius-card: 15px;
    --app-radius-dialog: 16px;
    --app-radius-modal: 17px;
    --app-radius-2xl: 18px;
    --app-radius-xl: 20px;
    --app-radius-pill: 999px;
    --app-shadow-card: 0 1px 2px rgba(18, 59, 69, .05), 0 8px 24px rgba(18, 59, 69, .045);
    --app-shadow-raised: 0 8px 28px rgba(18, 59, 69, .055);
    --app-shadow-overlay: 0 24px 70px rgba(18, 59, 69, .22);
    --app-focus-ring: 0 0 0 4px rgba(84, 185, 165, .13);

    /* Compatibility aliases used by older redesigned pages. */
    --app-border: var(--app-line);
    --app-mint-soft: var(--app-brand-soft);
}