/* =========================================================================
   Daimler Buses Design System — Colors & Type
   Derived from the Daimler Truck Corporate Design UI/UX Guidelines 2.0.0.
   Buses shares the Daimler Truck system but intentionally de-emphasizes the
   Petrol accent (the Truck brand colour) in favour of black / white / grey.
   ========================================================================= */

/* ---------- Fonts ----------------------------------------------------- */

@font-face {
  font-family: "Daimler CS";
  src: url("fonts/DaimlerCS-Regular.otf") format("opentype"),
       url("fonts/DaimlerCS-Regular.eot") format("embedded-opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold / Demi files were not supplied. FLAGGED: Daimler CS Bold/Demi/Light
   weights are used extensively in the Figma — please upload OTF files for
   Bold (700) and, if available, Demi (600) and Light (300). Until then we
   fall back to the next font in the stack (Arial Narrow / system sans). */
@font-face {
  font-family: "Daimler CS";
  src: url("fonts/DaimlerCS-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  /* synthetic bold until file is provided */
}

:root {
  /* =========================================================
     CORE PALETTE — Daimler Buses
     Primary brand use is Black / White / Grey only.
     Petrol exists in the system but Buses uses it sparingly.
     ========================================================= */

  /* Neutrals — Black & White (the true Buses brand colours) */
  --db-black:        #000000;
  --db-white:        #ffffff;

  /* Grey ramp (used for UI surfaces, borders, text) */
  --db-grey-50:      #e6e6e6;
  --db-grey-100:     #c5c5c5;
  --db-grey-200:     #a9a9a9;
  --db-grey-300:     #828282;
  --db-grey-400:     #696969;
  --db-grey-500:     #444444;
  --db-grey-600:     #3e3e3e;
  --db-grey-700:     #303030;
  --db-grey-800:     #252525;
  --db-grey-900:     #1d1d1d;

  /* Highlight — Daimler system yellow (use with restraint) */
  --db-highlight-100: #ffff40;

  /* Petrol — Daimler Truck corporate colour.
     For BUSES this is a reserved/secondary accent — avoid as primary brand. */
  --db-petrol-50:    #deeff2;
  --db-petrol-100:   #b0d0d7;
  --db-petrol-200:   #8ab9c4;
  --db-petrol-300:   #5499a9;
  --db-petrol-400:   #338599;
  --db-petrol-500:   #00677f;
  --db-petrol-600:   #005e74;
  --db-petrol-700:   #00495a;
  --db-petrol-800:   #003946;
  --db-petrol-900:   #002b35;

  /* =========================================================
     FUNCTIONAL COLOURS — restricted to system feedback only.
     Never use as general design accents.
     ========================================================= */

  /* Error */
  --db-error-50:  #ffe5e5;
  --db-error-100: #ffb0b0;
  --db-error-200: #ff8a8a;
  --db-error-300: #ff5454;
  --db-error-400: #ff3333;
  --db-error-500: #ff0000;
  --db-error-600: #e80000;
  --db-error-700: #b50000;
  --db-error-800: #8c0000;
  --db-error-900: #6b0000;

  /* Success */
  --db-success-50:  #e9f4ec;
  --db-success-100: #baddc4;
  --db-success-200: #98cda8;
  --db-success-300: #6ab680;
  --db-success-400: #4da868;
  --db-success-500: #209242;
  --db-success-600: #1d853c;
  --db-success-700: #17682f;
  --db-success-800: #125024;
  --db-success-900: #0d3d1c;

  /* Warning */
  --db-warning-50:  #fff8e6;
  --db-warning-100: #fde9b0;
  --db-warning-200: #fdde8a;
  --db-warning-300: #fccf54;
  --db-warning-400: #fbc533;
  --db-warning-500: #fab700;
  --db-warning-600: #e4a700;
  --db-warning-700: #b28200;
  --db-warning-800: #8a6500;
  --db-warning-900: #694d00;

  /* =========================================================
     SEMANTIC COLOUR TOKENS
     ========================================================= */

  --db-bg:           var(--db-white);
  --db-bg-subtle:    #fafafa;
  --db-bg-muted:     #f2f2f2;
  --db-bg-inverse:   var(--db-black);

  --db-fg:           var(--db-black);            /* default text */
  --db-fg-muted:     var(--db-grey-400);         /* secondary text */
  --db-fg-subtle:    var(--db-grey-300);         /* placeholder / disabled text */
  --db-fg-inverse:   var(--db-white);

  --db-border:       var(--db-grey-50);          /* hairline dividers */
  --db-border-strong:var(--db-grey-100);         /* inputs, cards */
  --db-border-focus: var(--db-black);

  --db-accent:       var(--db-black);            /* Buses accent = black */
  --db-accent-hover: var(--db-grey-700);
  --db-accent-fg:    var(--db-white);

  --db-highlight:    var(--db-highlight-100);

  --db-status-error:   var(--db-error-500);
  --db-status-success: var(--db-success-500);
  --db-status-warning: var(--db-warning-500);
  --db-status-info:    var(--db-petrol-500);

  /* =========================================================
     TYPOGRAPHY — Daimler CS is the single face.
     Scale mirrors the Design Navigator type ramp exactly.
     ========================================================= */

  --db-font-sans: "Daimler CS", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --db-fw-regular: 400;
  --db-fw-bold:    700;

  /* Raw size tokens (px / rem pair) */
  --db-size-50:  12px;   /*  .75rem */
  --db-size-100: 14px;   /* .875rem */
  --db-size-200: 16px;   /*    1rem */
  --db-size-300: 18px;   /* 1.125rem */
  --db-size-400: 20px;   /*  1.25rem */
  --db-size-500: 24px;   /*   1.5rem */
  --db-size-600: 30px;   /* 1.875rem */
  --db-size-700: 36px;   /*  2.25rem */
  --db-size-800: 60px;   /*  3.75rem */
  --db-size-900: 72px;   /*   4.5rem */

  /* Line heights */
  --db-lh-50:  20px;
  --db-lh-100: 24px;
  --db-lh-200: 28px;
  --db-lh-300: 30px;
  --db-lh-400: 32px;
  --db-lh-500: 38px;
  --db-lh-600: 44px;
  --db-lh-700: 60px;
  --db-lh-800: 72px;
  --db-lh-900: 90px;

  /* Letter spacing */
  --db-ls-tight: -0.0625rem;   /* -1px */
  --db-ls-tighter: -0.125rem;  /* -2px */

  /* =========================================================
     SPACING — 4px base grid
     ========================================================= */
  --db-space-0:  0;
  --db-space-1:  4px;
  --db-space-2:  8px;
  --db-space-3:  12px;
  --db-space-4:  16px;
  --db-space-5:  24px;
  --db-space-6:  32px;
  --db-space-7:  40px;
  --db-space-8:  48px;
  --db-space-9:  64px;
  --db-space-10: 80px;

  /* Radii — the Daimler system is almost square. */
  --db-radius-0: 0;
  --db-radius-1: 2px;
  --db-radius-2: 4px;
  --db-radius-pill: 999px;

  /* Elevation — used very sparingly. Surfaces are flat with 1px borders. */
  --db-shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --db-shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --db-shadow-3: 0 8px 24px rgba(0,0,0,0.10);

  /* Motion */
  --db-ease:        cubic-bezier(.2,.0,.0,1);
  --db-duration-1:  120ms;
  --db-duration-2:  200ms;
  --db-duration-3:  320ms;
}

/* ---------- Base document --------------------------------------------- */

html, body {
  font-family: var(--db-font-sans);
  font-weight: var(--db-fw-regular);
  color: var(--db-fg);
  background: var(--db-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type classes (mirror Figma "Type scale base") ----- */

.db-display-lg { font-size: var(--db-size-900); line-height: var(--db-lh-900); letter-spacing: var(--db-ls-tighter); font-weight: var(--db-fw-bold); }
.db-display-sm { font-size: var(--db-size-800); line-height: var(--db-lh-700); letter-spacing: var(--db-ls-tight);   font-weight: var(--db-fw-bold); }

.db-heading-lg { font-size: var(--db-size-700); line-height: var(--db-lh-600); font-weight: var(--db-fw-bold); }
.db-heading-md { font-size: var(--db-size-600); line-height: var(--db-lh-500); font-weight: var(--db-fw-bold); }
.db-heading-sm { font-size: var(--db-size-500); line-height: var(--db-lh-400); font-weight: var(--db-fw-bold); }

.db-body-lg    { font-size: var(--db-size-400); line-height: var(--db-lh-300); }
.db-body-md    { font-size: var(--db-size-300); line-height: var(--db-lh-200); }
.db-body-sm    { font-size: var(--db-size-200); line-height: var(--db-lh-100); }
.db-body-xs    { font-size: var(--db-size-100); line-height: var(--db-lh-50);  }

.db-link-lg    { font-size: var(--db-size-300); line-height: var(--db-lh-200); text-decoration: underline; text-underline-offset: 3px; }
.db-link-md    { font-size: var(--db-size-200); line-height: var(--db-lh-100); text-decoration: underline; text-underline-offset: 3px; }
.db-link-sm    { font-size: var(--db-size-100); line-height: var(--db-lh-50);  text-decoration: underline; text-underline-offset: 2px; }
.db-link-xs    { font-size: var(--db-size-50);  line-height: 16px;             text-decoration: underline; text-underline-offset: 2px; }

.db-label-sm   { font-size: var(--db-size-50);  line-height: 16px; }
.db-label-xs   { font-size: 10px;               line-height: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Mapped HTML defaults -------------------------------------- */

h1 { font-size: var(--db-size-800); line-height: var(--db-lh-700); letter-spacing: var(--db-ls-tight);  font-weight: var(--db-fw-bold); margin: 0 0 var(--db-space-5); }
h2 { font-size: var(--db-size-700); line-height: var(--db-lh-600); font-weight: var(--db-fw-bold); margin: 0 0 var(--db-space-5); }
h3 { font-size: var(--db-size-600); line-height: var(--db-lh-500); font-weight: var(--db-fw-bold); margin: 0 0 var(--db-space-4); }
h4 { font-size: var(--db-size-500); line-height: var(--db-lh-400); font-weight: var(--db-fw-bold); margin: 0 0 var(--db-space-3); }
h5 { font-size: var(--db-size-400); line-height: var(--db-lh-300); font-weight: var(--db-fw-bold); margin: 0 0 var(--db-space-3); }
h6 { font-size: var(--db-size-300); line-height: var(--db-lh-200); font-weight: var(--db-fw-bold); margin: 0 0 var(--db-space-2); }

p { font-size: var(--db-size-200); line-height: var(--db-lh-100); margin: 0 0 var(--db-space-4); }
small, .small { font-size: var(--db-size-100); line-height: var(--db-lh-50); }

a { color: var(--db-fg); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--db-grey-500); }

hr { border: none; border-top: 1px solid var(--db-border); margin: var(--db-space-6) 0; }