/* ============================================================
   QS Tech — Design Tokens
   Style "shop sơn VN" — practical, trust-building, energetic.
   ============================================================ */

:root {
  /* ---------- Color (OKLCH) ---------- */
  --c-bg: oklch(98% 0.005 90);
  --c-paper: oklch(95% 0.01 80);
  --c-ink: oklch(18% 0.015 250);
  --c-ink-soft: oklch(40% 0.015 250);
  --c-mute: oklch(51% 0.014 250);
  --c-line: oklch(88% 0.008 250);
  --c-line-soft: oklch(92% 0.008 250);

  /* Navy khớp đúng logo QS Tech (#22428E, hue 264) */
  --c-brand: oklch(40% 0.132 264);
  --c-brand-deep: oklch(20% 0.075 264);
  /* Cam khớp logo (#F4821F, hue 54); accent-deep giữ đậm cho CTA đủ tương phản */
  --c-accent: oklch(60% 0.17 54);
  --c-accent-soft: oklch(88% 0.09 78);
  --c-accent-deep: oklch(48% 0.19 52);

  /* Vàng + xanh núi lấy thẳng từ logo — điểm nhấn nhận diện */
  --c-yellow: oklch(93.8% 0.20 106);       /* #FEF100 vàng logo */
  --c-yellow-soft: oklch(95% 0.11 100);
  --c-sky: oklch(70.5% 0.079 247);          /* xanh ngọn núi logo */
  --c-sky-deep: oklch(42% 0.119 259);

  --c-success: oklch(55% 0.14 145);
  --c-warn: oklch(58% 0.18 25);
  --c-warn-soft: oklch(95% 0.05 25);
  --c-zalo: oklch(60% 0.18 240);

  /* ---------- Typography ---------- */
  --f-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-base: 0.96rem;
  --t-sm: 0.85rem;
  --t-xs: 0.72rem;
  --t-lg: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --t-xl: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem);
  --t-2xl: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  --t-section: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  --t-display: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
  --t-hero: clamp(2.4rem, 1.2rem + 4vw, 4.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-base: 1.55;
  --lh-loose: 1.7;

  --ls-tight: -0.025em;
  --ls-wide: 0.22em;

  /* ---------- Spacing ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;

  --pad-section: clamp(3.5rem, 7vw, 6rem);
  --pad-x: clamp(1rem, 3vw, 2rem);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 8px oklch(20% 0 0 / 0.04);
  --shadow-md: 0 10px 30px oklch(20% 0 0 / 0.08);
  --shadow-lg: 0 30px 60px oklch(20% 0 0 / 0.12);

  /* ---------- Motion ---------- */
  --d-fast: 150ms;
  --d-normal: 300ms;
  --d-slow: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-index ---------- */
  --z-nav: 40;
  --z-float: 60;
  --z-modal: 100;
  --z-toast: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-normal: 0ms;
    --d-slow: 0ms;
  }
}