/* ============================================================================
   VGLI — Design tokens
   ----------------------------------------------------------------------------
   The single source of truth for the platform's visual values. No component
   may write a colour, a radius, a shadow or a duration by hand: if a value
   does not exist here, it is added here.

   With colours the rule admits no exception — every colour in the project is
   a variable in this file, even one used exactly once. See
   docs/DESIGN_SYSTEM.md §2.6.

   Reading order:
     1. Vector brand          the official corporate colours
     2. VGLI palette         dark-mode surfaces, accents and text
     3. Semantics             state, focus, charts and maps
     4. Typography
     5. Spacing and measures
     6. Shape, shadow, blur
     7. Motion
     8. Layers (z-index)
     9. Application layout

   Documented in docs/DESIGN_SYSTEM.md.
   ========================================================================= */

:root {
  /* ==========================================================================
     1. VECTOR BRAND — the official corporate colours
     Kept intact: they are the identity of Vector Global Logistics.
     ====================================================================== */
  --vector-primary-red: #ff3e32;
  --vector-primary-blue: #003c6f;
  --vector-primary-black: #000000;
  --vector-primary-light: #f3f5f7;

  --vector-secondary-orange-red: #f15b40;
  --vector-secondary-yellow: #fbb03b;
  --vector-secondary-yellow-soft: #fbbf6d;
  --vector-secondary-ocean: #0f6e8c;
  --vector-secondary-teal: #148c9a;
  --vector-secondary-green-soft: #6eaaa0;
  --vector-secondary-gray-blue: #b0c2cb;
  --vector-secondary-gray-light: #c5d5df;
  --vector-secondary-gray-extra-light: #daebf5;

  /* RGB channels, for composing transparencies without repeating the hex. */
  --vector-primary-red-rgb: 255 62 50;
  --vector-primary-blue-rgb: 0 60 111;

  /* ==========================================================================
     2. VGLI PALETTE — dark mode
     ====================================================================== */

  /* Backgrounds: from the deepest to the closest to the content. */
  --vglia-bg-950: #030a12;
  --vglia-bg-900: #06111c;
  --vglia-bg-850: #081722;
  --vglia-bg-800: #0b1b2a;

  /* Surfaces: cards, panels and their states. */
  --vglia-surface-900: #0a1724;
  --vglia-surface-850: #0d1e2d;
  --vglia-surface-800: #102638;
  --vglia-surface-750: #142d42;
  --vglia-surface-hover: #18364d;

  /* Technology accents: blue and cyan. */
  --vglia-blue-500: #1677ff;
  --vglia-blue-400: #2b8cff;
  --vglia-blue-300: #55a7ff;
  --vglia-cyan-500: #00c8e8;
  --vglia-cyan-400: #22d8f5;
  --vglia-cyan-300: #67e8f9;
  --vglia-teal-500: #148c9a;
  --vglia-teal-400: #26a9b6;

  /* The AI accent: purple. Reserved for the intelligent and the predictive. */
  --vglia-purple-500: #7c5cff;
  --vglia-purple-400: #967dff;
  --vglia-purple-300: #b2a4ff;

  /* The attention accent: amber. */
  --vglia-amber-500: #fbb03b;
  --vglia-amber-400: #fbbf6d;

  --vglia-blue-rgb: 43 140 255;
  --vglia-cyan-rgb: 0 200 232;
  --vglia-purple-rgb: 124 92 255;
  --vglia-teal-rgb: 38 169 182;
  --vglia-amber-rgb: 251 176 59;

  /* Text, in decreasing order of emphasis. */
  --vglia-text-primary: #f4f8fc;
  --vglia-text-secondary: #b4c3d1;
  --vglia-text-muted: #7890a3;
  --vglia-text-disabled: #526878;
  /* Over a light accent (cyan, amber) the text has to be dark. */
  --vglia-text-on-accent: #030a12;
  /* Over a saturated, dark accent (blue, purple, red) it has to be white. It
     is the only pure white in the system, and that is why it lives here:
     written by hand in each component, nobody would know they are the same
     colour. */
  --vglia-text-on-solid: #ffffff;

  /* Borders. */
  --vglia-border-subtle: rgb(176 194 203 / 0.1);
  --vglia-border-default: rgb(176 194 203 / 0.16);
  --vglia-border-strong: rgb(103 232 249 / 0.25);
  --vglia-border-active: rgb(43 140 255 / 0.55);

  /* Glass and scrims. */
  --vglia-glass-bg: rgb(13 30 45 / 0.72);
  --vglia-glass-bg-strong: rgb(10 23 36 / 0.88);
  --vglia-overlay: rgb(3 10 18 / 0.72);
  /* See-through glass, for a panel that floats over the page it belongs to,
     and the light scrim that blurs that page behind it. */
  --vglia-glass-bg-light: rgb(13 30 45 / 0.42);
  --vglia-scrim-soft: rgb(3 10 18 / 0.3);

  /* ==========================================================================
     3. SEMANTICS
     ====================================================================== */
  --color-info: var(--vglia-blue-400);
  --color-success: #2ec75c;
  --color-warning: var(--vector-secondary-yellow);
  --color-danger: var(--vector-primary-red);

  --color-info-rgb: 43 140 255;
  --color-success-rgb: 46 199 92;
  --color-warning-rgb: 251 176 59;
  --color-danger-rgb: 255 62 50;

  /* State-tinted surfaces, for badges and notices. */
  --surface-info: rgb(var(--color-info-rgb) / 0.12);
  --surface-success: rgb(var(--color-success-rgb) / 0.12);
  --surface-warning: rgb(var(--color-warning-rgb) / 0.12);
  --surface-danger: rgb(var(--color-danger-rgb) / 0.12);

  /* Keyboard focus: always visible, never removed. */
  --focus-ring: 0 0 0 2px var(--vglia-bg-950), 0 0 0 4px var(--vglia-blue-400);
  --focus-ring-offset: 2px;

  /* The chart palette. The order matters: it is the sequence ECharts assigns
     to series. All of them clear 4.5:1 over --vglia-surface-850. */
  --chart-1: #22d8f5;
  --chart-2: #967dff;
  --chart-3: #26a9b6;
  --chart-4: #55a7ff;
  --chart-5: #fbbf6d;
  --chart-6: #6eaaa0;
  --chart-7: #ff7a6e;
  --chart-8: #b2a4ff;
  --chart-grid: rgb(176 194 203 / 0.08);
  --chart-axis: rgb(176 194 203 / 0.35);
  --chart-label: #7890a3;

  /* What a correspondent is to Vector. One colour per relationship, defined
     once so the badge in a table, the slice in a pie chart and the dot on the
     map all say the same thing about the same company — three files that would
     otherwise drift apart the first time somebody adjusted one of them.

     Drawn from the chart ramp on purpose: these appear as chart series as often
     as they appear as badges, and inventing a second set of six would put two
     different cyans next to each other on the same screen. */
  --relationship-client-rgb: 34 216 245;
  --relationship-lead-rgb: 150 125 255;
  --relationship-agent-rgb: 38 169 182;
  --relationship-partner-rgb: 85 167 255;
  --relationship-leadership-rgb: 251 191 109;
  --relationship-extern-rgb: 110 170 160;
  /* A former client: Vector's secondary orange-red, softened — somebody to win
     back reads warm, and it is not the red of an alarm. */
  --relationship-former-rgb: 241 124 100;
  /* The rest sit where the ramp leaves room — greens and yellows, violets and
     pinks — so no two read alike, and all of them still clear 4.5:1 over
     --vglia-surface-850. Who Vector buys from in greens (supplier, vendor);
     the two ends of a shipment in pinks (shipper, consignee); an agent marked
     VIP in gold, the colour that means it everywhere. */
  --relationship-supplier-rgb: 74 222 128;
  --relationship-vendor-rgb: 163 230 53;
  --relationship-agent_vip-rgb: 253 224 71;
  --relationship-shipper-rgb: 232 121 249;
  --relationship-consignee-rgb: 244 114 182;
  --relationship-forwarder-rgb: 129 140 248;
  --relationship-unknown-rgb: 82 104 120;
  /* Colleagues inside Vector, on the Summary's figures for a folder that holds them. */
  --relationship-internal-rgb: 148 163 184;

  --relationship-client: rgb(var(--relationship-client-rgb));
  --relationship-lead: rgb(var(--relationship-lead-rgb));
  --relationship-agent: rgb(var(--relationship-agent-rgb));
  --relationship-partner: rgb(var(--relationship-partner-rgb));
  --relationship-leadership: rgb(var(--relationship-leadership-rgb));
  --relationship-extern: rgb(var(--relationship-extern-rgb));
  --relationship-former: rgb(var(--relationship-former-rgb));
  --relationship-supplier: rgb(var(--relationship-supplier-rgb));
  --relationship-vendor: rgb(var(--relationship-vendor-rgb));
  --relationship-agent_vip: rgb(var(--relationship-agent_vip-rgb));
  --relationship-shipper: rgb(var(--relationship-shipper-rgb));
  --relationship-consignee: rgb(var(--relationship-consignee-rgb));
  --relationship-forwarder: rgb(var(--relationship-forwarder-rgb));
  --relationship-unknown: rgb(var(--relationship-unknown-rgb));
  --relationship-internal: rgb(var(--relationship-internal-rgb));

  /* Folder colours: one per FolderColour in apps/followup/folder_models.py,
     as RGB channels so a tile can tint its glass and its border with the same
     colour at different strengths. Bright enough to read on the dark
     surfaces; the folder's name is always written beside it. */
  --folder-purple-rgb: 150 125 255;
  --folder-violet-rgb: 192 132 252;
  --folder-indigo-rgb: 129 140 248;
  --folder-blue-rgb: 85 167 255;
  --folder-sky-rgb: 56 189 248;
  --folder-cyan-rgb: 34 216 245;
  --folder-teal-rgb: 45 212 191;
  --folder-emerald-rgb: 52 211 153;
  --folder-green-rgb: 74 222 128;
  --folder-lime-rgb: 163 230 53;
  --folder-yellow-rgb: 253 224 71;
  --folder-amber-rgb: 251 191 109;
  --folder-orange-rgb: 251 146 60;
  --folder-red-rgb: 248 113 113;
  --folder-rose-rgb: 251 113 133;
  --folder-pink-rgb: 244 114 182;
  --folder-fuchsia-rgb: 232 121 249;
  --folder-slate-rgb: 148 163 184;

  /* The board's traffic light: the state colours, named for what they mean
     there. */
  --light-red-rgb: var(--color-danger-rgb);
  --light-amber-rgb: var(--color-warning-rgb);
  --light-green-rgb: var(--color-success-rgb);

  /* Map. */
  --map-water: #061019;
  --map-land: #0e2033;
  --map-border: rgb(103 232 249 / 0.18);
  --map-node: #22d8f5;
  --map-node-office: #967dff;
  --map-route-ocean: rgb(34 216 245 / 0.55);
  --map-route-road: rgb(150 125 255 / 0.55);

  /* Natural disasters on the News map: the one place an icon there has a
     colour of its own rather than its level's — an earthquake is worth
     recognising before how bad it is, and the ring around it still carries
     the level. From the palette, like everything else (apps/news/kinds.py). */
  --news-kind-hurricane: var(--vglia-cyan-300);
  --news-kind-tsunami: var(--vglia-teal-400);
  --news-kind-earthquake: var(--vector-secondary-yellow);
  --news-kind-volcano: var(--vector-primary-red);
  --news-kind-wildfire: var(--vector-secondary-orange-red);
  --news-kind-landslide: var(--vector-secondary-gray-blue);
  --news-kind-winter: var(--vector-primary-light);
  --news-kind-flood: var(--vglia-blue-300);
  --news-kind-drought: var(--vglia-amber-400);
  --news-kind-storm: var(--vglia-purple-300);

  /* ==========================================================================
     4. TYPOGRAPHY
     Poppins and Lato are Vector's corporate typefaces; JetBrains Mono is
     reserved for tabular data, identifiers and code. They are served from
     static/fonts (see fonts.css): the platform does not depend on Google Fonts.
     ====================================================================== */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 0.6875rem;  /* 11px — axis labels, microcopy */
  --text-xs: 0.75rem;     /* 12px — badges, card footnotes */
  --text-sm: 0.8125rem;   /* 13px — dense interface, tables */
  --text-base: 0.875rem;  /* 14px — default body */
  --text-md: 1rem;        /* 16px — highlighted text */
  --text-lg: 1.125rem;    /* 18px — card titles */
  --text-xl: 1.375rem;    /* 22px — section titles */
  --text-2xl: 1.75rem;    /* 28px — page title */
  --text-3xl: 2.25rem;    /* 36px — KPI figures */
  --text-4xl: 3rem;       /* 48px — landing page */
  --text-5xl: 4rem;       /* 64px — landing page */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* ==========================================================================
     5. SPACING AND MEASURES
     A 4px scale. Every margin, padding and gap comes from here.
     ====================================================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-sm: 40rem;
  --container-md: 56rem;
  --container-lg: 72rem;
  --container-xl: 90rem;
  --container-full: 120rem;

  /* Control heights: they keep inputs, buttons and selects aligned. */
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 44px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75;

  /* ==========================================================================
     6. SHAPE, SHADOW AND BLUR
     ====================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  --shadow-sm: 0 1px 2px rgb(3 10 18 / 0.4);
  --shadow-md: 0 6px 18px rgb(3 10 18 / 0.45);
  --shadow-lg: 0 18px 42px rgb(3 10 18 / 0.55);
  --shadow-xl: 0 32px 72px rgb(3 10 18 / 0.65);

  /* The glow is an accent, not the default state of a card. */
  --glow-blue: 0 0 28px rgb(var(--vglia-blue-rgb) / 0.18);
  --glow-cyan: 0 0 28px rgb(var(--vglia-cyan-rgb) / 0.16);
  --glow-purple: 0 0 28px rgb(var(--vglia-purple-rgb) / 0.15);
  --glow-amber: 0 0 28px rgb(var(--vglia-amber-rgb) / 0.15);

  --blur-sm: 8px;
  --blur-md: 14px;
  --blur-lg: 22px;

  /* ==========================================================================
     7. MOTION
     Fast and restrained. The interface should feel immediate, not choreographed.
     ====================================================================== */
  --transition-fast: 120ms;
  --transition-normal: 200ms;
  --transition-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-enter: 320ms;
  --duration-stagger: 45ms;

  /* ==========================================================================
     8. LAYERS
     One place where what goes on top of what is decided.
     ====================================================================== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-dropdown: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  /* Above everything, including a dialog: the loader exists to stop the page
     being touched, and a modal drawn over it would be a control somebody
     could still reach. */
  --z-loader: 900;

  /* ==========================================================================
     9. APPLICATION LAYOUT
     ====================================================================== */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 68px;
  --page-padding-x: var(--space-6);
  --page-padding-y: var(--space-6);
  --card-padding: var(--space-5);
  --grid-gap: var(--space-4);
}

/* A light theme does not exist yet: VGLI is a dark-mode platform. The scheme
   is declared so the browser's native controls (scrollbars, selects, date
   pickers) are painted dark and do not break. */
:root {
  color-scheme: dark;
}

/* Less density on small screens: the same system, a different scale. */
@media (max-width: 768px) {
  :root {
    --page-padding-x: var(--space-4);
    --page-padding-y: var(--space-4);
    --card-padding: var(--space-4);
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 2.75rem;
  }
}