@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* tokens.design.css */
:root {
  /* COLORS - Design System Colors */
  --color-primary: #005984;
  --color-primary-hover: #007ea3;
  --color-secondary: #19313c;
  --color-text-secondary: #657780;
  --color-text-tertiary: #acc9d7;
  --color-border: #bcbcbc79;
  --color-border-light: #ececec;
  --color-background-alt: #fdfdfd;
  --color-accent: #e75236;
  --color-selection: #8d5502;
  --color-success: #acc9d7;

  /* Background & Foreground */
  --primary-background: #ffffff;
  --primary-foreground: #000000;
  --secondary-background: #f2f2f2;
  --light-background: #f3f3f3;
  --lighter-background: #f1f1f1;

  /* Alert & Status */
  --alert-info-bg: #007ea31a;
  --alert-info-border: #007ea3;
  --alert-danger-bg: #d400261a;
  --alert-danger-border: #d40026;
  --alert-danger-text: #d40025;
  --alert-success-bg: var(--color-success);
  --alert-pbk-bg: #f1f1f1;
  --alert-intro-bg: #ffffff;


  /* Table */
  --table-striped-bg: #f1f8ff;
  --table-header-bg: #d5e8f1;
  --table-hover-bg: #f2f2f2;

  /* Forms */
  --input-border-color: #bcc2c5;
  --input-text-color: #000000;
  --form-control-bg: #ffffff;

  /* Navigation */
  --navbar-bg: #005984;
  --navbar-text: #ffffff;
  --navbar-hover-bg: #007ea3;
  --sidebar-bg: #f6fafe;
  --sidebar-border: #005984;
  --sidebar-hover-bg: #f3f3f3;
  --sidebar-active-bg: #005984;
  --sidebar-active-text: #ffffff;

  /* Buttons */
  --btn-default-color: #005984;
  --btn-default-bg: #ffffff;
  --btn-default-border: #005984;
  --btn-default-hover-color: #007ea3;
  --btn-default-hover-bg: #f6fafe;
  --btn-default-hover-border: #007ea3;
  --btn-primary-color: #ffffff;
  --btn-primary-bg: #005984;
  --btn-primary-border: #005984;
  --btn-primary-hover-bg: #007ea3;
  --btn-primary-hover-border: #007ea3;
  --btn-base-darker-10: color-mix(in oklab, var(--btn-base) 90%, black); /* ~10% darker */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--btn-base-darker-10);
  --bs-btn-active-border-color: var(--btn-base-darker-10);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-border)!important;
    
  /* Modal */
  --modal-header-bg: var(--color-secondary);
  --modal-header-text: var(--primary-background);
  --modal-body-bg: #ffffff;
  --modal-body-text: #000000;

  /* Special Components */
  --car-mr-border: #949494;
  --car-mr-empty-bg: #ffc0c7;
  --car-mr-updated-bg: var(--color-success);;
  --car-mr-invalid-border: #e15858;
  --my-cars-bg: #acc9d7;

  /* Typography */
  --font-family: "Lato", sans-serif;
  --font-display: "Lato", sans-serif;
  --font-sans: "Lato", sans-serif;
  --font-size-h1: 44px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-body: 14px;
  --font-size-small: 10px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --line-height-h1: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-body: 1.6;
  --line-height-modal: 0;

  /* Spacing */
  --spacing-xs: 3px;
  --spacing-sm: 5px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;

  /* Borders */
  --border-radius: 4px;
  --border-radius-lg: 50rem;
  --border-width-thin: thin;
  --border-width-thick: thick;
  --border-width-2px: 2px;

  /* Shadows */
  --box-shadow-focus: 0 0 5px rgba(0, 89, 132, 0.5);
  --box-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Z-Index */
  --z-index-overlay: 999;
  --z-index-active: 2;

  /* Animations */
  --transition-speed: 0.3s;
  --animation-spin: spin 2s linear infinite;

  /* Icons (Bootstrap Icons codes) */
  --icon-chevron-right: "\F285";
  --icon-chevron-left: "\F284";
  --icon-chevron-up: "\F286";
  --icon-chevron-down: "\F282";
  --icon-person-fill: "\F4DA";
  --icon-sort-up: "\F148";
  --icon-sort-down: "\F128";
  --icon-insert-action: "\F4FA";
  --icon-edit: "\F4CB";
  --icon-delete: "\F5DE";
  --icon-info-fill: "\F430";
  --icon-check-circle: "\F26B";
  --icon-circle: "\F28A";
  
  /* Aliases / safe defaults (used across rules) */
  --primary-hover: var(--color-primary-hover);
  --primary-light: #eef7fb;
  --font-size-modal: 14px;
  --nav-item-pad-x: 16px;
  --nav-item-pad-y: 8px;
}