/* KleverCargo design system tokens — copied from the Claude Design project (klevercargo-design-system). */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/Poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/Poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-400-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-500-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-600-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Poppins-700-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/Poppins-800-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
:root {
  /* ---------- Brand blue ---------- */
  --logoBlue: #005b9e;
  --primaryDark: #005b9e;
  --primaryDarkHover: #196ba8;
  --primaryDarkClicked: #337cb1;
  --primary: #2586c5;
  --primaryHover: #007dc1;
  --hoverLightBlue: #d9e7f1;
  --darkPrimaryLinearGradient: linear-gradient(90deg, rgba(0, 91, 158, 1) 0%, rgba(0, 125, 193, 1) 35%); /* @kind color */

  /* ---------- Ink ---------- */
  --secondary: #0c2138;
  --secondaryHover: #5a6268;
  --primaryText: var(--secondary);
  --secondaryText: #8f99a2;

  /* ---------- Neutrals ---------- */
  --white: #ffffff;
  --background: #f1f4f6;
  --opaqueBackground: rgb(241 244 246 / 0.8);
  --gray1: #e4e6e8;
  --gray2: #c9cdd2;
  --gray3: #8f99a2;
  --gray4: #788390;
  --gray5: #5d6b7a;
  --gray6: #425264;
  --inactive: var(--gray3);

  /* ---------- Semantic ---------- */
  --tertiary: #ebd671;
  --tertiaryDark: #ffc60a;
  --tertiaryHover: #ece3b8;
  --tertiaryLight: #ffc60a9e;
  --warning: var(--tertiary);
  --warningHover: #ebb70e;
  --success: #67b164;
  --green: #67b164;
  --successLight: #67b16426;
  --successHover: #579955;
  --danger: #f78079;
  --dangerHover: #dc3545;
  --dangerLight: rgba(247, 128, 121, 0.15);
  --info: #30b1ff;

  /* ---------- Selection / menu ---------- */
  --selectedMenuItemBackground: rgba(37, 134, 197, 0.15);

  /* ---------- Shipment lifecycle ---------- */
  --statusPending: #425264;
  --statusConfirmed: #00796b;
  --statusLoading: #ebb70e;
  --statusInTransit: #005b9e;
  --statusAtCustoms: #aa51d4;
  --statusUnloading: #f07b0f;
  --statusCompleted: #579955;
  --statusCancelled: #dc3545;

  /* ---------- Company verification ---------- */
  --verificationPendingBg: #fff3e0;
  --verificationPendingColor: #e65100;
  --verificationPendingBorder: #ffcc80;
  --verificationDeclinedBg: #ffebee;
  --verificationDeclinedColor: #c62828;
  --verificationDeclinedBorder: #ef9a9a;
  --verificationApprovedBg: #67b16426;
  --verificationApprovedColor: #579955;
  --verificationApprovedBorder: #67b164;

  /* ---------- Internal-reference amber (CargoCard ref chips) ---------- */
  --refChipBg: #fffaf0;
  --refChipBorder: #f2e4c2;
  --refChipText: #8a6d1f;
  --refChipLabel: #b89a4e;

  /* ---------- Accepted-row tint (PriceComparisonList) ---------- */
  --acceptedRowBg: #f0faf4;

  /* ---------- Alert dot (NotificationBadge) ---------- */
  --alertDot: #ffbf00;
  --alertDotGlow: rgba(255, 191, 0, 0.7);

  /* ---------- Credit-worthiness scale (KleverCargo Score) ---------- */
  --creditScoreGradient: linear-gradient(90deg, #f36961 0%, #f78079 25.29%, #ebb70e 42.33%, #ebb70e 58.33%, #67b164 75.88%, #67b164 99.11%); /* @kind color */

  /* ---------- SVG fills ---------- */
  --primarySvg: var(--primary);
  --primaryDarkSvg: var(--primaryDark);
  --secondarySvg: var(--secondary);
  --tertiarySvg: var(--gray3);
  --whiteSvg: var(--white);

  /* ---------- Borders & form elements ---------- */
  --borderColor: var(--gray1);
  --borderFormElement: var(--gray1);
  --borderFormElementHover: var(--gray4);
  --borderFormElementFocus: var(--primary);
  --colorFormElementFocus: var(--gray5);
  --placeholderColor: var(--gray2);
  --disabledBackgroundColor: var(--gray1);

  /* ---------- Semantic aliases (design-system API) ---------- */
  --text-body: var(--secondary);
  --text-muted: var(--secondaryText);
  --text-subtle: var(--gray3);
  --text-strong: var(--secondary);
  --text-link: var(--primary);
  --text-inverse: var(--white);
  --text-danger: var(--dangerHover);
  --text-success: var(--successHover);

  --surface-page: var(--background);
  --surface-card: var(--white);
  --surface-sunken: var(--background);
  --surface-hover: var(--hoverLightBlue);
  --surface-selected: var(--selectedMenuItemBackground);
  --surface-disabled: var(--gray1);

  --border-default: var(--gray1);
  --border-strong: var(--gray2);
  --border-hover: var(--gray4);
  --border-focus: var(--primary);

  --accent-brand: var(--primary);
  --accent-brand-strong: var(--primaryDark);
  --feedback-success: var(--success);
  --feedback-warning: var(--warningHover);
  --feedback-danger: var(--danger);
  --feedback-info: var(--info);
}

:root {
  /* ---------- Families ---------- */
  --fontFamily: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* @kind font */
  --fontMono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* @kind font */

  /* ---------- Size ramp (px — the app renders 10–16px in dense views) ---------- */
  --fs-micro: 10px;
  --fs-meta: 11px;
  --fs-label: 12px;
  --fs-body: 13px;
  --fs-input: 14px;
  --fs-title: 15px;
  --fs-heading: 16px;
  --fs-section: 19px;
  --fs-display: 24px;

  /* ---------- Weight ---------- */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---------- Leading ---------- */
  --lh-tight: 1.2; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-normal: 1.4; /* @kind font */
  --lh-relaxed: 1.5; /* @kind font */

  /* ---------- Tracking ---------- */
  --tracking-tight: -0.01em; /* @kind font */
  --tracking-caps: 0.05em; /* @kind font */
  --tracking-caps-wide: 0.08em; /* @kind font */
}

:root {
  /* ---------- Source gap scale ---------- */
  --gap5: 5px;
  --gap10: 10px;
  --gap15: 15px;
  --gap20: 20px;
  --gap30: 30px;
  --elementPadding: 15px;

  /* ---------- Full step scale ---------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 15px;
  --space-8: 20px;
  --space-9: 30px;

  /* ---------- Component padding ---------- */
  --cardPadding: 20px;
  --controlPaddingX: 10px;
  --buttonPaddingX: 20px;
  --chipPaddingY: 4px;
  --chipPaddingX: 9px;
}

:root {
  --radius-sm: 2px;
  --radius-knob: 3px;
  --buttonBorderRadius: 4px;
  --borderRadius: 6px;
  --chipBorderRadius: 7px;
  --cardBorderRadius: 8px;
  --dashboardPanelBorderRadius: 8px;
  --drawerRadius: 10px;
  --cargoCardRadius: 12px;
  --pillRadius: 50px;
  --radius-full: 9999px;
}

:root {
  /* Card — the workhorse elevation. Note: --cardBoxShdowHover keeps the source spelling. */
  --cardBoxShadow: 0px 2px 8px rgb(12 33 56 / 20%);
  --cardBoxShdowHover: 0px 2px 16px rgb(12 33 56 / 20%);
  --cardBoxShadowHover: 0px 2px 16px rgb(12 33 56 / 20%);
  --cardBoxShadowTransition: box-shadow 0.2s; /* @kind other */

  /* Flat bordered surfaces (cargo cards, table rows) */
  --hairlineShadow: 0 1px 2px rgba(12, 33, 56, 0.04);
  --rowHoverShadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --switcherActiveShadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  /* Floating layers */
  --tooltipShadow: 0px 1px 8px #00000029;
  --dropdownShadow: -1px 10px 14px 0px #aaa;
  --notificationShadow: 0px 2px 10px -2px rgb(148 148 148 / 60%);

  /* Inset — drawer header ridge, toggle track */
  --insetHeaderShadow: inset 0px -1px 1px 0px rgba(0, 0, 0, 0.16); /* @kind shadow */
  --insetTrackShadow: inset 0 3px 6px 0 #0006; /* @kind shadow */

  /* Scrims */
  --drawerScrim: #0c213841;
  --modalScrim: rgba(255, 255, 255, 0.6);
  --scrimBlur: blur(2px); /* @kind other */
}

:root {
  --transitionFast: 0.12s; /* @kind other */
  --transitionBase: 0.2s; /* @kind other */
  --transitionSlow: 0.3s; /* @kind other */
  --transitionSlide: 0.5s; /* @kind other */
  --transitionKnob: 0.7s; /* @kind other */
  --formDrawerAnimationTime: 0.4s; /* @kind other */

  --easeStandard: ease; /* @kind other */
  --easeInOut: ease-in-out; /* @kind other */
  --easeLinear: linear; /* @kind other */
}

:root {
  /* ---------- App chrome ---------- */
  --headerHeight: 50px;
  --navMenuMinWidthOpened: 210px;
  --navMenuMinWidthClosed: 52px;
  --cardHeaderHeight: 34px;
  --formDrawerHeaderHeight: 40px;
  --formDrawerWrapperGap: 10px;
  --scrollWidth: 6px;

  /* ---------- Grid minimums ---------- */
  --cardMinWidth: 287px;
  --elementMinWidth: 320px;

  /* ---------- Control heights ---------- */
  --controlHeight: 30px;
  --controlHeightLarge: 35px;
  --buttonHeight: 35px;
  --checkboxSize: 20px;
  --viewSwitcherHeight: 32px;
  --tableHeaderHeight: 36px;
  --tableRowHeight: 52px;

  --formDrawerContentHeightPC: calc(100vh - var(--formDrawerHeaderHeight) - 2 * var(--formDrawerWrapperGap)); /* @kind other */
}

@media only screen and (min-width: 1441px) {
  :root { --elementMinWidth: 360px; }
}
@media only screen and (max-width: 350px) {
  :root { --elementMinWidth: 284px; }
}