/* Shared design tokens.
   Start with colors; add spacing, radius or shadow tokens here when they become shared concepts. */

:root {
    --elaport-color-primary: #006e9f;
    --elaport-color-primary-bright: #009de0;
    --elaport-color-primary-dark: #005b85;
    --elaport-color-primary-hover: #00577d;
    --elaport-color-primary-deep: #003e5b;
    --elaport-color-primary-ghost: #eef7fc;
    --elaport-color-accent: #FC8500;
    --elaport-color-accent-hover: #e97800;
    --elaport-color-danger: #FC3000;
    --elaport-color-secondary: #607684;

    --elaport-color-text: #172f3d;
    --elaport-color-text-strong: #15384d;
    --elaport-color-text-muted: #6b7f8b;
    --elaport-color-text-heading: #17384a;
    --elaport-color-text-deep: #263f4d;
    --elaport-color-text-quiet: #5f7784;
    --elaport-color-text-soft: #455f70;
    --elaport-color-text-subtle: #324d5d;

    --elaport-color-surface: #fff;
    --elaport-color-surface-primary-soft: #edf7fb;
    --elaport-color-surface-primary-hover: #e1f1f8;
    --elaport-color-surface-muted: #edf3f7;
    --elaport-color-surface-subtle: #f7fafc;
    --elaport-color-surface-raised: #f8fbfd;
    --elaport-color-surface-hover: #f4f8fa;
    --elaport-color-black: #000;

    --elaport-color-border: #d6e0e7;
    --elaport-color-border-medium: #c8d6de;
    --elaport-color-border-strong: #b8c6cf;
    --elaport-color-border-soft: #cfe0e8;
    --elaport-color-border-subtle: #dce6ec;
    --elaport-color-border-muted: #d6e1e7;
    --elaport-color-border-primary: #9fc5d8;
    --elaport-color-border-primary-soft: #b9d9e8;
    --elaport-color-modal-border: #888;
    --elaport-color-modal-close: #aaa;
    --elaport-color-popup-background: #555;
    --elaport-color-overlay-solid: #000;
    --elaport-color-overlay: rgba(0, 0, 0, 0.4);
    --elaport-color-navbar-background: #333;
    --elaport-color-navbar-hover: #111;
    --elaport-color-navbar-logo-hover: #e6e6e6;
    --elaport-color-navbar-mobile-submenu: #262626;
    --elaport-color-navbar-logout: var(--elaport-color-primary-bright);
    --elaport-color-navbar-border: rgba(255, 255, 255, 0.18);
    --elaport-color-gray: #808080;
    --elaport-color-success: #216331;
    --elaport-color-success-surface: #edf8ef;
    --elaport-color-success-surface-soft: #ecfbf3;
    --elaport-color-success-border: #9cc9a6;
    --elaport-color-success-strong: #0f6b4a;
    --elaport-color-danger-text: #b42318;
    --elaport-color-danger-surface: #fff0ed;
    --elaport-color-danger-surface-soft: #fff7f5;
    --elaport-color-danger-surface-subtle: #fffafa;
    --elaport-color-danger-border: #f0b5aa;
    --elaport-color-warning-text: #8a5a10;
    --elaport-color-warning-surface: #fff8e8;
    --elaport-color-warning-surface-soft: #fff8ee;
    --elaport-color-warning-border: #e8c989;

    --elaport-color-dashboard-border: var(--elaport-color-border-medium);
    --elaport-color-dashboard-border-strong: #B2B2B2;
    --elaport-color-dashboard-text-dark: #1d1d1d;
    --elaport-color-dashboard-panel: rgba(255, 255, 255, 0.94);
    --elaport-color-dashboard-panel-border: #d6dde1;
    --elaport-color-dashboard-divider: #e0e6ea;
    --elaport-color-dashboard-heading: #1d252b;
    --elaport-color-dashboard-muted: #66737c;
    --elaport-color-dashboard-surface-subtle: #f8fbfc;
    --elaport-color-dashboard-card-border: #dce4e8;
    --elaport-color-dashboard-flag-hover: #e8f4fa;
    --elaport-color-dashboard-flag-border: #c8d1d6;
    --elaport-color-dashboard-list-border: #e1e7eb;
    --elaport-color-dashboard-list-text: #34424a;
    --elaport-color-layout-surface: rgba(255, 255, 255, 0.8);
    --elaport-color-layout-sidebar: rgba(255, 255, 255, 0.92);
    --elaport-color-layout-panel: rgba(255, 255, 255, 0.95);
    --elaport-color-layout-border: var(--elaport-color-border-medium);
    --elaport-color-layout-panel-header: var(--elaport-color-surface-subtle);
    --elaport-color-layout-quicknav: var(--elaport-color-surface-muted);
    --elaport-color-layout-quicknav-hover: #dfeaf1;
    --elaport-color-layout-quicknav-hover-border: #8fb1c5;
    --elaport-color-layout-supplier-hover: #1f1f1f;
    --elaport-color-layout-map-button: #f6edcf;
    --elaport-color-layout-map-button-hover: #efe0ad;
    --elaport-color-layout-map-button-text: #5b481b;
    --elaport-color-layout-map-button-hover-text: #4a3a14;

    --elaport-shadow-focus-primary: 0 0 0 3px rgba(0, 110, 159, 0.14);
    --elaport-shadow-navbar-dropdown: 0 10px 24px rgba(0, 0, 0, 0.28);
    --elaport-shadow-dashboard-panel: 0 8px 22px rgba(0, 0, 0, 0.08);
    --elaport-shadow-layout-sidebar: 0 8px 24px rgba(0, 0, 0, 0.12);
    --elaport-shadow-layout-panel: 0 6px 16px rgba(23, 47, 61, 0.07);
    --elaport-shadow-toggle-knob: 0 1px 3px rgba(0, 0, 0, 0.28);
}