/* ----------------------------------------------------------------
 * Design tokens. Single source of truth.
 * Change anything here, and it cascades everywhere in the site.
 * Mirrored in /theme.json for the WP block editor.
 * ---------------------------------------------------------------- */

:root {
  /* ---- Brand colors ---- */
  --vq-color-primary:        #004EEB;   /* Vehicquire blue */
  --vq-color-primary-dark:   #003CB3;   /* Hover / pressed */
  --vq-color-primary-light:  #4E7AE8;   /* Tints, illustrations */
  --vq-color-secondary:      #020617;   /* Deepest ink */

  /* ---- Neutrals ---- */
  --vq-color-ink:            #0F172A;   /* Body text */
  --vq-color-muted:          #475569;   /* Secondary text */
  --vq-color-subtle:         #64748B;   /* Tertiary text, captions */
  --vq-color-border:         #E2E8F0;   /* Hairlines */
  --vq-color-bg:             #FFFFFF;   /* Page background */
  --vq-color-bg-soft:        #F2F8FF;   /* Soft section background */
  --vq-color-bg-mute:        #F8FAFC;   /* Card background */

  /* ---- Status ---- */
  --vq-color-success:        #16A34A;
  --vq-color-warning:        #D97706;
  --vq-color-danger:         #DC2626;

  /* ---- Typography ---- */
  --vq-font-display: "Clash Display", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vq-font-body:    "Satoshi", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vq-font-mono:    "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

  /* Fluid type scale - clamp(min, ideal, max) - based on a major-third ratio */
  --vq-text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);   /* 12-13 */
  --vq-text-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 0.9375rem);   /* 14-15 */
  --vq-text-base: clamp(1rem,     0.96rem + 0.22vw, 1.0625rem);   /* 16-17 */
  --vq-text-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);     /* 18-20 */
  --vq-text-xl:   clamp(1.25rem,  1.15rem + 0.52vw, 1.5rem);      /* 20-24 */
  --vq-text-2xl:  clamp(1.5rem,   1.34rem + 0.82vw, 2rem);        /* 24-32 */
  --vq-text-3xl:  clamp(1.875rem, 1.62rem + 1.30vw, 2.625rem);    /* 30-42 */
  --vq-text-4xl:  clamp(2.25rem,  1.86rem + 1.95vw, 3.375rem);    /* 36-54 */
  --vq-text-5xl:  clamp(2.75rem,  2.12rem + 3.15vw, 4.5rem);      /* 44-72 */

  /* Line heights */
  --vq-leading-tight: 1.15;
  --vq-leading-snug:  1.3;
  --vq-leading-base:  1.55;
  --vq-leading-loose: 1.75;

  /* Letter spacing */
  --vq-tracking-tight: -0.02em;
  --vq-tracking-base:   0;
  --vq-tracking-wide:   0.06em;
  --vq-tracking-eyebrow: 0.14em;

  /* Font weights */
  --vq-weight-regular: 400;
  --vq-weight-medium:  500;
  --vq-weight-semibold: 600;
  --vq-weight-bold:    700;

  /* ---- Spacing scale (4 px base) ---- */
  --vq-space-1:  0.25rem;   /* 4  */
  --vq-space-2:  0.5rem;    /* 8  */
  --vq-space-3:  0.75rem;   /* 12 */
  --vq-space-4:  1rem;      /* 16 */
  --vq-space-5:  1.5rem;    /* 24 */
  --vq-space-6:  2rem;      /* 32 */
  --vq-space-7:  2.5rem;    /* 40 */
  --vq-space-8:  3rem;      /* 48 */
  --vq-space-9:  4rem;      /* 64 */
  --vq-space-10: 5rem;      /* 80 */
  --vq-space-11: 6rem;      /* 96 */
  --vq-space-12: 8rem;      /* 128 */

  /* ---- Container widths ---- */
  --vq-container-narrow: 720px;
  --vq-container-base:   1120px;
  --vq-container-wide:   1280px;

  /* ---- Radii ---- */
  --vq-radius-sm: 6px;
  --vq-radius-md: 10px;
  --vq-radius-lg: 16px;
  --vq-radius-xl: 24px;
  --vq-radius-full: 9999px;

  /* ---- Shadows ---- */
  --vq-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --vq-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --vq-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

  /* ---- Transitions ---- */
  --vq-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --vq-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --vq-duration:    180ms;
  --vq-duration-lg: 320ms;

  /* ---- Z-index scale ---- */
  --vq-z-base:      1;
  --vq-z-sticky:    100;
  --vq-z-header:    200;
  --vq-z-overlay:   500;
  --vq-z-modal:     900;
  --vq-z-toast:     1000;
}