/* GC Framework's shared visual vocabulary.
 * Source: the actual GC login/public UI and existing operational components.
 * The supplied navy/orange mark is an asset, not a reason to recolor data.
 * Application surfaces are light and flat. Native Django admin themes remain native.
 */
:root {
    --gc-color-brand-navy: #002b43;
    --gc-color-brand-orange: #ff6800;
    --gc-color-canvas: #f3f6fa;
    --gc-color-surface: #ffffff;
    --gc-color-surface-translucent: rgba(255, 255, 255, .92);
    --gc-color-surface-subtle: #f8fafc;
    --gc-color-surface-hover: #eef5ff;
    --gc-color-border: #c4d5ee;
    --gc-color-border-strong: #b2c7e8;
    --gc-color-control-border: #607089;
    --gc-color-text: #11233d;
    --gc-color-text-secondary: #345173;
    --gc-color-text-muted: #49627f;
    --gc-color-placeholder: var(--gc-color-text-muted);
    --gc-color-heading: #004594;
    --gc-color-primary: #004594;
    --gc-color-primary-hover: #0f56c2;
    --gc-color-primary-soft: #eaf3ff;
    --gc-color-on-primary: #ffffff;
    --gc-color-positive: #17643a;
    --gc-color-positive-soft: #eaf7ef;
    --gc-color-warning: #795000;
    --gc-color-warning-soft: #fff6df;
    --gc-color-negative: #8a2424;
    --gc-color-negative-soft: #fff0f0;
    --gc-color-info: #165a89;
    --gc-color-info-soft: #eaf6fd;
    --gc-color-disabled: #607089;
    --gc-color-disabled-surface: #edf1f5;
    --gc-color-header-start: #1a60ad;
    --gc-color-header-middle: #103b73;
    --gc-color-header-end: #071a35;
    --gc-color-header-muted: #d3e5fb;
    --gc-color-overlay: rgba(7, 26, 53, .45);
    --gc-background-auth: linear-gradient(145deg, #eef4ff 0%, #dceaf7 45%, #d8eef0 100%);
    --gc-background-primary: linear-gradient(140deg, var(--gc-color-primary), var(--gc-color-primary-hover));
    --gc-background-header: linear-gradient(108deg, var(--gc-color-header-start), var(--gc-color-header-middle) 43%, var(--gc-color-header-end));

    --gc-font-sans: Inter, "Segoe UI", Arial, sans-serif;
    --gc-font-size-xs: 11px;
    --gc-font-size-sm: 12px;
    --gc-font-size-md: 14px;
    --gc-font-size-body: 16px;
    --gc-font-size-lg: 17px;
    --gc-font-size-dialog: 20px;
    --gc-font-size-title: 24px;
    --gc-font-size-xl: clamp(24px, 2.2vw, 32px);
    --gc-font-weight-regular: 400;
    --gc-font-weight-medium: 500;
    --gc-font-weight-support: 550;
    --gc-font-weight-label: 600;
    --gc-font-weight-strong: 650;
    --gc-line-height: 1.5;
    --gc-line-height-heading: 1.15;

    --gc-space-0: 0;
    --gc-space-1: 4px;
    --gc-space-2: 8px;
    --gc-space-3: 12px;
    --gc-space-4: 16px;
    --gc-space-5: 20px;
    --gc-space-6: 24px;
    --gc-space-8: 32px;
    --gc-space-10: 40px;
    --gc-border-width: 1px;
    --gc-radius-sm: 6px;
    --gc-radius-md: 10px;
    --gc-radius-lg: 14px;
    --gc-radius-auth: 18px;
    --gc-radius-pill: 999px;
    --gc-shadow-sm: none;
    --gc-shadow-md: none;
    --gc-shadow-raised: none;
    --gc-focus-color: #2f73bd;
    --gc-focus-width: 2px;
    --gc-focus-offset: 2px;
    --gc-focus-outline: var(--gc-focus-width) solid var(--gc-focus-color);
    --gc-focus-ring: none;
    --gc-control-height: 38px;
    --gc-control-compact-height: 32px;
    --gc-auth-control-height: 42px;
    --gc-touch-target: 44px;
    --gc-logo-size: 44px;
    --gc-logo-sidebar-size: 34px;
    --gc-logo-admin-size: 32px;
    --gc-layout-content-max: 1760px;
    --gc-layout-gutter: 20px;
    --gc-layout-auth-max: 460px;
    --gc-layout-sidebar: 236px;
    --gc-layout-sidebar-collapsed: 76px;
    --gc-layout-header-height: 64px;
    --gc-layout-dialog-max: 560px;
    --gc-z-dropdown: 100;
    --gc-z-navigation: 1000;
    --gc-z-overlay: 1100;
    --gc-z-tooltip: 1200;
    --gc-duration-fast: 160ms;
    --gc-duration-normal: 220ms;
    --gc-ease: ease;
    /* CSS media queries cannot consume custom properties. Keep literal media
     * values synchronized with these documented breakpoints. */
    --gc-breakpoint-sm: 480px;
    --gc-breakpoint-md: 780px;
    --gc-breakpoint-lg: 1100px;
    --gc-breakpoint-xl: 1440px;

    /* Preserve established chart meanings; orange in the logo is not warning. */
    --gc-chart-planned: #1768c5;
    --gc-chart-baseline: var(--gc-chart-planned);
    --gc-chart-earned: #0f766e;
    --gc-chart-actual: var(--gc-chart-earned);
    --gc-chart-forecast: #8a5a00;
    --gc-chart-positive: #2f6f44;
    --gc-chart-negative: #b42318;
    --gc-chart-text: var(--gc-color-text);
    --gc-chart-muted: var(--gc-color-text-muted);
    --gc-chart-grid: #d7e0eb;
    --gc-chart-axis: #607089;
    --gc-chart-surface: var(--gc-color-surface);
    --gc-chart-track: var(--gc-color-primary-soft);
    --gc-chart-series-1: #1768c5;
    --gc-chart-series-2: #0f766e;
    --gc-chart-series-3: #8a5a00;
    --gc-chart-series-4: #5b5fc7;
    --gc-chart-series-5: #b42318;
    --gc-chart-series-6: #2f6f44;
    --gc-chart-series-7: #7a3e7a;
    --gc-chart-series-8: #42526e;

    /* Existing UX components consume these aliases; new work uses GC names. */
    --ux-color-canvas: var(--gc-color-canvas);
    --ux-color-surface: var(--gc-color-surface);
    --ux-color-surface-subtle: var(--gc-color-surface-subtle);
    --ux-color-border: var(--gc-color-border);
    --ux-color-border-strong: var(--gc-color-border-strong);
    --ux-color-text: var(--gc-color-text);
    --ux-color-text-muted: var(--gc-color-text-muted);
    --ux-color-heading: var(--gc-color-heading);
    --ux-color-primary: var(--gc-color-primary);
    --ux-color-primary-hover: var(--gc-color-primary-hover);
    --ux-color-primary-soft: var(--gc-color-primary-soft);
    --ux-color-positive: var(--gc-color-positive);
    --ux-color-positive-soft: var(--gc-color-positive-soft);
    --ux-color-warning: var(--gc-color-warning);
    --ux-color-warning-soft: var(--gc-color-warning-soft);
    --ux-color-negative: var(--gc-color-negative);
    --ux-color-negative-soft: var(--gc-color-negative-soft);
    --ux-color-info: var(--gc-color-info);
    --ux-color-info-soft: var(--gc-color-info-soft);
    --ux-space-1: var(--gc-space-1);
    --ux-space-2: var(--gc-space-2);
    --ux-space-3: var(--gc-space-3);
    --ux-space-4: var(--gc-space-4);
    --ux-space-5: var(--gc-space-5);
    --ux-space-6: var(--gc-space-6);
    --ux-space-8: var(--gc-space-8);
    --ux-radius-sm: var(--gc-radius-sm);
    --ux-radius-md: var(--gc-radius-md);
    --ux-radius-lg: var(--gc-radius-lg);
    --ux-shadow-sm: var(--gc-shadow-sm);
    --ux-shadow-md: var(--gc-shadow-md);
    --ux-focus-ring: var(--gc-focus-ring);
    --ux-font-sans: var(--gc-font-sans);
    --ux-font-size-xs: var(--gc-font-size-xs);
    --ux-font-size-sm: var(--gc-font-size-sm);
    --ux-font-size-md: var(--gc-font-size-md);
    --ux-font-size-lg: var(--gc-font-size-lg);
    --ux-font-size-xl: var(--gc-font-size-xl);
    --ux-content-max: var(--gc-layout-content-max);
}