@charset "UTF-8";
/* ==========================================================================
   XCMG Auto Thailand · Design tokens
   Single source of truth for colour, type, space, radius, elevation, motion.
   Map 1:1 to Elementor Global Colors / Global Fonts when building in WP.
   ========================================================================== */

:root {
  /* ---- Brand colour ---------------------------------------------------- */
  --color-brand-ink: oklch(0.18 0.045 258);        /* deepest navy: dark sections, headings */
  --color-brand-navy: oklch(0.24 0.05 258);        /* raised surface on dark */
  --color-brand-blue: oklch(0.48 0.155 253);   /* sampled from XCMG logo ≈ #0060B0 */         /* XCMG blue: links, active, accents */
  --color-brand-blue-strong: oklch(0.4 0.14 253); /* hover / pressed blue */
  --color-brand-sky: oklch(0.82 0.1 245);          /* accent text on dark */
  --color-action: oklch(0.56 0.21 27);             /* primary CTA (quote) */
  --color-action-strong: oklch(0.5 0.2 27);
  --color-eco: oklch(0.3 0.09 160);                /* #OCRGOINGGREEN only */
  --color-eco-light: oklch(0.86 0.12 150);

  /* ---- Neutrals (tinted toward brand hue) ------------------------------ */
  --color-surface: oklch(0.995 0.003 250);         /* cards, inputs */
  --color-canvas: oklch(0.975 0.006 250);          /* page background */
  --color-subtle: oklch(0.955 0.008 250);          /* tinted bands, image wells */
  --color-line: oklch(0.9 0.01 250);               /* dividers, borders */
  --color-line-strong: oklch(0.82 0.015 250);
  --color-text: oklch(0.22 0.04 258);              /* body text */
  --color-text-muted: oklch(0.44 0.03 258);        /* secondary text, ≥4.5:1 on canvas */
  --color-text-on-dark: oklch(0.97 0.006 250);
  --color-text-on-dark-muted: oklch(0.8 0.025 250);

  /* ---- Status ---------------------------------------------------------- */
  --color-success: oklch(0.55 0.15 150);
  --color-error: oklch(0.52 0.2 27);
  --color-pending-bg: oklch(0.95 0.05 85);
  --color-pending-text: oklch(0.45 0.09 70);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Fluid scale, ratio ≈ 1.25+. Use the role names, never raw sizes. */
  --text-caption: 0.8125rem;                              /* 13px  eyebrow, meta */
  --text-small: 0.875rem;                                 /* 14px  labels */
  --text-body: 1rem;                                      /* 16px */
  --text-lead: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);/* 17–20 */
  --text-title-sm: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);  /* card titles */
  --text-title: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);      /* section titles */
  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);      /* page titles */
  --text-hero: clamp(3rem, 1.8rem + 5.6vw, 7.5rem);           /* homepage / about hero */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.7;
  --tracking-display: -0.03em;
  --tracking-eyebrow: 0.2em;
  --measure: 65ch;

  /* ---- Space (4px base) ------------------------------------------------ */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-section: clamp(4rem, 2.5rem + 6vw, 8.5rem);  /* vertical rhythm between sections */
  --space-gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);   /* page side padding */

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 82.5rem;   /* 1320px: the only content width */
  --container-narrow: 48rem;  /* long-form text, forms */
  --header-height: 4.5rem;

  /* ---- Shape ----------------------------------------------------------- */
  --radius-none: 0;           /* buttons, cards, inputs, media: square brand language */
  --radius-pill: 999px;       /* filter tabs, chips, floating contact only */
  --radius-round: 50%;        /* icon buttons, dots */

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-raised: 0 1px 0 var(--color-line), 0 16px 40px oklch(0.18 0.045 258 / 0.06);
  --shadow-floating: 0 20px 50px oklch(0.18 0.045 258 / 0.16);
  --shadow-media: 0 30px 60px oklch(0.12 0.05 258 / 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* enter, hover, UI response */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */
  --duration-press: 160ms;
  --duration-ui: 240ms;
  --duration-reveal: 700ms;
  --duration-media: 1100ms;                          /* image zoom on hover */
  --press-scale: 0.97;

  /* ---- Focus ----------------------------------------------------------- */
  --focus-ring: 0 0 0 3px oklch(0.46 0.2 258 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-reveal: 1ms;
    --duration-media: 1ms;
    --press-scale: 1;
  }
}