/* ============================================
   tokens.css — Caarzoo
   All design tokens as CSS custom properties.
   Edit here to retheme the entire site.
============================================ */

:root {

  /* ── COLOURS ── */
  --color-ink:           #0C0C14;
  --color-ink-2:         #44445A;
  --color-ink-3:         #8888A0;
  --color-white:         #FFFFFF;
  --color-surface:       #F4F4F8;
  --color-surface-2:     #EAEAF0;

  --color-accent:        #1A4ED8;
  --color-accent-2:      #3D6EF5;
  --color-accent-light:  #EAF0FD;

  --color-green:         #0A7A50;
  --color-green-light:   #E3F4EE;

  --color-amber:         #92600A;
  --color-amber-light:   #FEF3DC;

  --color-border:        rgba(12, 12, 20, 0.09);
  --color-border-2:      rgba(12, 12, 20, 0.16);

  /* Dashboard / dark UI colours */
  --color-dash-bg:       #0C0C14;
  --color-dash-border:   rgba(255, 255, 255, 0.07);
  --color-dash-text:     rgba(255, 255, 255, 0.58);
  --color-dash-muted:    rgba(255, 255, 255, 0.28);
  --color-dash-blue:     #6A9BF8;
  --color-dash-green:    #4CD69A;
  --color-dash-amber:    #FFC657;

  /* ── TYPOGRAPHY ── */
  --font-family:         'Jost', sans-serif;

  --font-size-xs:        11px;
  --font-size-sm:        13px;
  --font-size-base:      15px;
  --font-size-md:        16px;
  --font-size-lg:        18px;
  --font-size-xl:        22px;
  --font-size-2xl:       28px;
  --font-size-3xl:       36px;
  --font-size-4xl:       48px;
  --font-size-hero:      clamp(36px, 5.5vw, 62px);
  --font-size-h2:        clamp(26px, 3.5vw, 40px);

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;
  --font-weight-black:   900;

  --line-height-tight:   1.1;
  --line-height-snug:    1.3;
  --line-height-base:    1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -2px;
  --letter-spacing-snug:   -1px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-wider:  0.08em;

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-22:  88px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   7px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 2px 8px rgba(12, 12, 20, 0.06);
  --shadow-md:   0 4px 18px rgba(12, 12, 20, 0.08);
  --shadow-lg:   0 8px 32px rgba(12, 12, 20, 0.10);
  --shadow-hero: 0 -8px 60px rgba(26, 78, 216, 0.15);

  /* ── TRANSITIONS ── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.2s ease;
  --transition-slow:   all 0.3s ease;

  /* ── LAYOUT ── */
  --container-max:     1280px;
  --container-padding: 24px;
  --section-padding:   var(--space-22) 0;
  --nav-height:        60px;
}