/* ==========================================================================
   SPEEDY MOTORS — DESIGN TOKENS
   v3: Premium performance automotive. Dark-first (~60-70% dark surfaces),
   white/silver for contrast sections, Ferrari-red used sparingly as an
   accent only. Single source of truth. Change values here, nowhere else.
   ========================================================================== */

:root {

  /* --- COLOR ----------------------------------------------------------------
     Dark-first system. Body defaults to --ink/--paper (dark bg, light text).
     Light sections (Utvalda fordon, Sålda fordon, Om oss, Kontakt) invert
     explicitly via the .on-light utility — see pages.css.
     ------------------------------------------------------------------- */
  --ink:            #0B0B0D;  /* primary background — near-black, not pure   */
  --ink-raised:     #17171A;  /* raised dark surfaces — cards, nav panels    */
  --ink-elevated:   #202024;  /* one step brighter — hover states on dark    */
  --ink-hairline:   #2B2B30;  /* borders/dividers on dark surfaces           */
  --ink-scrim:      rgba(6, 6, 8, 0.82);

  --paper:          #FFFFFF;  /* primary text on dark / bg of light sections */
  --paper-raised:   #F1F1F3;  /* secondary bg — light-section cards          */
  --paper-hairline: #E1E1E4;  /* borders/dividers on light surfaces          */
  --paper-dim:      #9B9BA3;  /* secondary/dim text on DARK surfaces         */

  --graphite:       #6B6B72;  /* secondary text on LIGHT surfaces            */
  --silver:         #B8B8BE;  /* chrome/silver detail — icons, thin lines    */

  /* THE one red. Every accent on the site traces back to this single value —
     do not introduce a second red/coral/pink tone anywhere. Small running
     text never uses it directly (fails AA on dark); it stays on borders,
     lines, icons, CTAs and hover/active states, where 3:1 is the bar. */
  --accent:         #D6132C;  /* Ferrari/performance red — ACTIONS ONLY.     */
  --accent-deep:    #A80E22;  /* accent hover / pressed — a darker shade of the SAME red */
  --accent-tint:    rgba(214, 19, 44, 0.1); /* faint wash — chips, active    */

  /* --- TYPE FAMILIES ----------------------------------------------------
     TWO families sitewide. Archivo carries display/headings and the logo
     wordmark; Inter carries body, nav, labels and buttons.

     Why Archivo: the HERO 2 reference sets its headlines in a wide, bold,
     uppercase grotesque — engineered and confident, not narrow. Roboto
     Condensed (used before) read cheaper and more generic at large sizes,
     and Chakra Petch (previously the logo face) has chamfered corners that
     read gaming/esports — the exact register this brand must avoid. Both
     are gone. Archivo covers display AND the wordmark, so the site now
     loads two families instead of three.
     -------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-logo:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* --- TYPE SCALE (mobile first) ---------------------------------------- *
     --fs-display-m is now used by only one element (the footer phone
     number CTA) — the display face is otherwise reserved for the hero and
     major H2s (see the tier system: base.css .t-display-*, components.css).
     Smaller headings (card titles, trust labels, review names) render in
     Inter instead, at their own explicit sizes.
     ------------------------------------------------------------------- */
  --fs-display-xl: 2.75rem;  /* 44px */
  --fs-display-l:  2.25rem;  /* 36px */
  --fs-display-m:  1.5rem;   /* 24px */
  --fs-body-l:     1.125rem; /* 18px */
  --fs-body:       1rem;     /* 16px */
  --fs-body-s:     0.875rem; /* 14px */
  --fs-spec:       0.8125rem;/* 13px */
  --fs-label:      0.75rem;  /* 12px */

  --lh-display:    1.08;
  --lh-body:       1.6;
  --lh-tight:      1.25;

  /* Archivo is a wide grotesque: uppercase display needs negative tracking
     to read as one confident block rather than spaced-out letters. */
  --tr-display-xl: -0.02em;
  --tr-display-l:  -0.015em;
  --tr-display-m:  -0.01em;
  --tr-spec:       0.05em;
  --tr-label:      0.1em;

  /* --- SPACING (8px base) ----------------------------------------------- */
  --sp-1:  0.25rem;  /*   4 */
  --sp-2:  0.5rem;   /*   8 */
  --sp-3:  1rem;     /*  16 */
  --sp-4:  1.5rem;   /*  24 */
  --sp-5:  2rem;     /*  32 */
  --sp-6:  3rem;     /*  48 */
  --sp-7:  4rem;     /*  64 */
  --sp-8:  6rem;     /*  96 */
  --sp-9:  8rem;     /* 128 */
  --sp-10: 10rem;    /* 160 */

  --section-y:   4rem;    /* section vertical padding — mobile */
  --gutter:      1.25rem; /* container side padding — mobile   */
  --grid-gap:    1rem;

  /* --- LAYOUT ------------------------------------------------------------- */
  --max-width:      1440px;
  --max-width-text: 1120px;
  --measure:        68ch;
  --measure-display: 20ch;

  /* --- FORM ------------------------------------------------------------- */
  --radius:      3px;   /* near-square, precise — performance, not consumer-app */
  --radius-sm:   2px;
  --hairline:    1px;
  --tap-min:     48px;
  --mobilebar-h: 60px;

  /* --- MOTION ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   200ms;
  --dur-mid:    400ms;
  --dur-slow:   500ms;
  --dur-reveal: 700ms;

  --z-mobilebar: 90;
  --z-menu:     200;
  /* header sits ABOVE the full-screen mobile menu so its toggle (now a
     close icon) stays visible and clickable while the menu is open */
  --z-header:   210;
  --z-dropdown: 150;
}

/* --- TABLET ------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --fs-display-xl: 3.75rem;  /* 60px */
    --fs-display-l:  2.75rem;  /* 44px */
    --fs-display-m:  1.75rem;  /* 28px */
    --fs-body-l:     1.1875rem;
    --fs-body:       1.0625rem;
    --fs-spec:       0.875rem;
    --fs-label:      0.8125rem;

    --section-y: 6.5rem;
    --gutter:    2.5rem;
    --grid-gap:  1.5rem;
  }
}

/* --- DESKTOP ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root {
    --fs-display-xl: 4.5rem;   /* 72px — strong but controlled, not gigantic */
    --fs-display-l:  3.25rem;  /* 52px */
    --fs-display-m:  2rem;     /* 32px */
    --fs-body-l:     1.25rem;  /* 20px */
    --fs-body:       1.0625rem;

    /* 7rem, not 8.5rem: at 1440 the old value put 136px above and below every
       section, so neighbouring sections sat 272px apart and stopped reading as
       one page. Deliberately desktop-only — the 768px and mobile values below
       are unchanged, because that spacing is correct on a phone. */
    --section-y: 7rem;
    --gutter:    4rem;
  }
}