/* =============================================================================
   Mercedes-Benz Theme — CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
  /* ── Colors ── */
  --color-gold:                        #c9a86c;
  --color-gold-muted:                  rgba(201,168,108,0.18);
  --color-primary:                    #000000;
  --color-on-primary:                 #ffffff;
  --color-background:                 #fdf8f8;
  --color-on-background:              #1c1b1b;
  --color-surface:                    #fdf8f8;
  --color-on-surface:                 #1c1b1b;
  --color-on-surface-variant:         #444748;
  --color-surface-variant:            #e5e2e1;
  --color-surface-container-lowest:   #ffffff;
  --color-surface-container-low:      #f7f3f2;
  --color-surface-container:          #f1edec;
  --color-surface-container-high:     #ebe7e6;
  --color-surface-container-highest:  #e5e2e1;
  --color-primary-container:          #1c1b1b;
  --color-secondary:                  #645e54;
  --color-outline-variant:            #c4c7c7;
  --color-outline:                    #747878;

  /* ── Spacing ── */
  --space-xs:     0.375rem;   /*  6px */
  --space-sm:     0.75rem;    /* 12px */
  --space:     1rem;    /* 12px */
  --space-md:     1.5rem;     /* 24px */
  --space-lg:     3rem;       /* 48px */
  --space-xl:     6rem;       /* 96px */
  --space-gutter: 2rem;       /* 32px */

  /* ── Typography: Font Families ── */
  --font-serif: "Be Vietnam Pro", sans-serif;
  --font-sans:  "Inter", sans-serif;
  --font-sans2:  "Playfair Display", serif;;

  /* ── Typography: Scales ── */
  /* headline-xl */
  --fz-headline-xl:       56px;
  --lh-headline-xl:       64px;
  --ls-headline-xl:      -0.02em;
  --fw-headline-xl:       300;

  /* headline-xl (mobile) */
  --fz-headline-xl-mob:   36px;
  --lh-headline-xl-mob:   42px;

  /* headline-lg */
  --fz-headline-lg:       40px;
  --lh-headline-lg:       48px;
  --ls-headline-lg:      -0.01em;
  --fw-headline-lg:       300;

  /* headline-lg (mobile) */
  --fz-headline-lg-mob:   28px;
  --lh-headline-lg-mob:   34px;

  /* headline-md */
  --fz-headline-md:       28px;
  --lh-headline-md:       36px;
  --fw-headline-md:       400;

  /* headline-sm */
  --fz-headline-sm:       20px;
  --lh-headline-sm:       28px;
  --fw-headline-sm:       400;

  /* body-lg */
  --fz-body-lg:           18px;
  --lh-body-lg:           28px;
  --fw-body-lg:           400;

  /* body-md */
  --fz-body-md:           15px;
  --lh-body-md:           24px;
  --fw-body-md:           400;

  /* body-sm */
  --fz-body-sm:           13px;
  --lh-body-sm:           20px;
  --fw-body-sm:           400;

  /* label-lg */
  --fz-label-lg:          14px;
  --lh-label-lg:          20px;
  --ls-label-lg:          0.05em;
  --fw-label-lg:          500;

  /* label-md */
  --fz-label-md:          12px;
  --lh-label-md:          16px;
  --ls-label-md:          0.08em;
  --fw-label-md:          500;

  /* label-sm */
  --fz-label-sm:          10px;
  --lh-label-sm:          14px;
  --ls-label-sm:          0.1em;
  --fw-label-sm:          600;

  /* ── Shape ── */
  --radius:        0.125rem;

  /* ── Layout ── */
  --max-width:     1600px;
  --header-height: 5rem;

  /* ── Transitions ── */
  --transition-base:  0.25s ease;
  --transition-slow:  0.5s ease;
  --transition-xslow: 0.7s ease;
}