/* ============================================================
   Mercedes-Benz Trucks — Design Tokens (CSS Custom Properties)
   Source: https://brand-design.mercedes-benz-trucks.com/
   Version: 3.0.0 | Last updated: 2026-04-30
   ============================================================ */

:root {

  /* ── Colour: Pure Blue ─────────────────────────────────────
     Dual-tone system: Dark (#0078D6) on light backgrounds,
     Bright (#008DFC) on dark backgrounds.
     On hover the tones swap: Dark ↔ Bright.
     ───────────────────────────────────────────────────────── */
  --color-pure-blue-50:  #FFFFFF;
  --color-pure-blue-100: #CCE8FE;
  --color-pure-blue-200: #99D0FE;
  --color-pure-blue-300: #66BBFD;
  --color-pure-blue-400: #33A4FD;
  --color-pure-blue-500: #008DFC; /* Bright — on dark bg */
  --color-pure-blue-550: #0078D6; /* Dark — on light bg */
  --color-pure-blue-600: #016CC1;
  --color-pure-blue-700: #005496;
  --color-pure-blue-800: #013C6B;
  --color-pure-blue-900: #002440;
  --color-pure-blue-950: #00182C;

  /* ── Colour: Neutral ───────────────────────────────────── */
  --color-neutral-white: #FFFFFF;
  --color-neutral-50:    #F2F2F2;
  --color-neutral-100:   #E6E6E6;
  --color-neutral-200:   #CCCCCC;
  --color-neutral-300:   #B3B3B3; /* Noble Grey */
  --color-neutral-400:   #999999; /* Grey */
  --color-neutral-500:   #808080;
  --color-neutral-600:   #666666;
  --color-neutral-700:   #4D4D4D;
  --color-neutral-800:   #373737; /* Grey Dark */
  --color-neutral-900:   #232323;
  --color-neutral-black: #000000;

  /* ── Colour: Indicator / Semantic ──────────────────────── */
  --color-success: #21A330;
  --color-warning: #FACC00;
  --color-error:   #FF4A4A;

  /* ── Colour: Semantic Aliases ──────────────────────────── */
  --color-primary-on-light:       var(--color-pure-blue-550);
  --color-primary-on-dark:        var(--color-pure-blue-500);
  --color-primary-hover-on-light: var(--color-pure-blue-500);
  --color-primary-hover-on-dark:  var(--color-pure-blue-550);
  --color-text-default:           var(--color-neutral-black);
  --color-text-secondary:         var(--color-neutral-800);
  --color-text-disabled:          var(--color-neutral-400);
  --color-text-on-dark:           var(--color-neutral-white);
  --color-text-on-blue:           var(--color-neutral-white);
  --color-bg-default:             var(--color-neutral-white);
  --color-bg-subtle:              var(--color-neutral-50);
  --color-bg-dark:                var(--color-neutral-black);
  --color-bg-blue:                var(--color-pure-blue-550);
  --color-border-default:         var(--color-neutral-200);
  --color-border-strong:          var(--color-neutral-black);
  --color-border-focus:           var(--color-pure-blue-550);

  /* ── Font Family ───────────────────────────────────────── */
  --font-family-headline: "MB Corpo S Title Cond", Arial, Helvetica, sans-serif;
  --font-family-subline:  "MB Corpo A Title Cond", Arial, Helvetica, sans-serif;
  --font-family-body:     "MB Corpo S Text", Arial, Helvetica, sans-serif;

  /* ── Font Weight ───────────────────────────────────────── */
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* ── Typography: Desktop ───────────────────────────────── */
  --typo-hbig-size:       160px;  --typo-hbig-line:       160px;
  --typo-h1-size:         90px;   --typo-h1-line:         88px;
  --typo-h2-size:         68px;   --typo-h2-line:         66px;
  --typo-h3-size:         48px;   --typo-h3-line:         50px;
  --typo-h4-size:         36px;   --typo-h4-line:         38px;
  --typo-h5-size:         36px;   --typo-h5-line:         44px;
  --typo-h6-size:         28px;   --typo-h6-line:         34px;
  --typo-paragraph-size:  22px;   --typo-paragraph-line:  32px;
  --typo-body-size:       18px;   --typo-body-line:       32px;
  --typo-caption-size:    14px;   --typo-caption-line:    20px;

  /* ── Spacing (8px grid) ────────────────────────────────── */
  --spacing-base: 8px;
  --spacing-xs:   16px;
  --spacing-sm:   24px;
  --spacing-ms:   32px;
  --spacing-md:   64px;
  --spacing-lg:   96px;
  --spacing-xl:   128px;

  /* ── Grid ──────────────────────────────────────────────── */
  --grid-columns:   12;
  --grid-max-width: 1680px;
  --grid-gutter:    24px;
  --grid-margin:    48px;

  /* ── Breakpoints ───────────────────────────────────────── */
  --bp-xs:  0px;
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-xxl: 1680px;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-none:   0px;
  --radius-button: 0px;
  --radius-chip:   24px;

  /* ── Shadow ────────────────────────────────────────────── */
  --shadow-button-hover: 0px 6px 12px rgba(0, 0, 0, 0.2);

  /* ── Motion ────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --easing-default:  cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --easing-in:       cubic-bezier(0.42, 0, 1, 1);
  --easing-out:      cubic-bezier(0, 0, 0.58, 1);

  /* ── Component: Header ─────────────────────────────────── */
  --header-height:        72px;
  --header-star-diameter: 38px;
  --header-nav-gap:       56px;

  /* ── Component: Button ─────────────────────────────────── */
  --button-height:        48px;
  --button-padding-x:     24px;
  --button-icon-gap:      16px;
  --button-font-size:     18px;
  --button-line-height:   32px;
  --button-primary-bg:           var(--color-pure-blue-550);
  --button-primary-bg-hover:     var(--color-pure-blue-500);
  --button-primary-text:         var(--color-neutral-white);
  --button-secondary-bg:         transparent;
  --button-secondary-border:     var(--color-neutral-black);
  --button-secondary-border-hover: var(--color-pure-blue-550);
  --button-secondary-text:       var(--color-neutral-black);
  --button-secondary-text-hover: var(--color-pure-blue-550);

  /* ── Component: Chip ───────────────────────────────────── */
  --chip-height:     36px;
  --chip-padding-x:  8px;
  --chip-font-size:  18px;
  --chip-line-height: 32px;

  /* ── Component: Input / Form ───────────────────────────── */
  --input-border-width: 1px;
  --input-border-color: var(--color-neutral-400);
  --input-border-focus: var(--color-pure-blue-550);
  --input-border-error: var(--color-error);

  /* ── Component: Dropdown ───────────────────────────────── */
  --dropdown-border-width: 1px;
  --dropdown-border-color: var(--color-neutral-black);
  --dropdown-active-bg:    var(--color-pure-blue-550);
  --dropdown-active-text:  var(--color-neutral-white);

  /* ── Component: Focus ──────────────────────────────────── */
  --focus-outline-width:  2px;
  --focus-outline-offset: 2px;
  --focus-outline-color:  var(--color-pure-blue-550);

  /* ── Icon Sizes ────────────────────────────────────────── */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;

  /* ── Aspect Ratios ─────────────────────────────────────── */
  --aspect-landscape: 16 / 9;
  --aspect-standard:  4 / 3;
  --aspect-square:    1 / 1;
  --aspect-panorama:  3 / 1;
  --aspect-wide:      2 / 1;

  /* ── Brandmark ─────────────────────────────────────────── */
  --brandmark-min-digital: 32px;
  --brandmark-header:      38px;
}

/* ── Mobile overrides ────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    /* Typography */
    --typo-hbig-size:       56px;   --typo-hbig-line:       58px;
    --typo-h1-size:         68px;   --typo-h1-line:         66px;
    --typo-h2-size:         48px;   --typo-h2-line:         50px;
    --typo-h3-size:         36px;   --typo-h3-line:         38px;
    --typo-h4-size:         28px;   --typo-h4-line:         30px;
    --typo-h5-size:         28px;   --typo-h5-line:         34px;
    --typo-h6-size:         22px;   --typo-h6-line:         28px;
    --typo-paragraph-size:  18px;   --typo-paragraph-line:  28px;
    --typo-body-size:       16px;   --typo-body-line:       28px;
    --typo-caption-size:    12px;   --typo-caption-line:    18px;

    /* Spacing */
    --spacing-md: 40px;
    --spacing-lg: 64px;
    --spacing-xl: 80px;

    /* Grid */
    --grid-gutter: 16px;
    --grid-margin: 16px;

    /* Header */
    --header-height: 56px;

    /* Button */
    --button-height:      44px;
    --button-font-size:   16px;
    --button-line-height: 28px;

    /* Chip */
    --chip-height:      32px;
    --chip-font-size:   16px;
    --chip-line-height: 28px;
  }
}