/* ===== BASE.CSS — DreamsOFT HQ ===== */
/* Reset + Fluid tokens */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;line-height:1.6;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}

:root{
  /* ---- Fluid type ---- */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8125rem, 0.76rem + 0.28vw, 0.9375rem);
  --text-base: clamp(1rem, 0.93rem + 0.33vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.56vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.33vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.5rem + 2.22vw, 3rem);
  --text-hero: clamp(2.75rem, 1.8rem + 4.17vw, 5rem);

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;   --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;   --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;     --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* ---- Easing ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Widths ---- */
  --content-max: 1200px;
  --content-wide: 1400px;
}