/* ============================================================
   DECOR HUB SOUVENIR — Design Tokens v3 (comic / pop-art)
   Akina (display) + Google Sans (body) · warm dó-paper base
   Synth: Awwwards 40-site deep-dive + taste-skill + impeccable
   ============================================================ */

/* ── Fonts ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Akina';
  src: url('../fonts/Akina.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Body = Google Sans (loads if present on device); DM Sans = faithful
   free stand-in so the build is reliable everywhere. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ── PALETTE — warm-tinted, never pure #fff/#000 ───────── */
  --paper:    #FBF3E1;   /* dó-paper cream — body base */
  --paper-2:  #F4E7C6;
  --paper-3:  #ECDDB4;
  --ink:      #1A1410;   /* warm near-black */
  --ink-2:    rgba(26, 20, 16, 0.64);
  --ink-3:    rgba(26, 20, 16, 0.34);
  --ink-line: rgba(26, 20, 16, 0.14);

  --vang:     #F7C012;   /* turmeric — HERO ground */
  --vang-deep:#ED9B17;   /* gold */
  --do:       #E5311C;   /* vermilion lacquer */
  --cam:      #F26419;   /* Hội An orange */
  --ngoc:     #16A085;   /* jade */
  --rong:     #2E7D6B;   /* dragon green */
  --hong:     #E98FA6;   /* lotus pink (accent) */
  --tim:      #9B6DD6;   /* purple (accent, sparse) */

  /* Section ground helpers */
  --bg-yellow: var(--vang);
  --bg-red:    var(--do);
  --bg-orange: var(--cam);
  --bg-jade:   var(--ngoc);
  --bg-ink:    var(--ink);

  /* ── TYPE ──────────────────────────────────────────────── */
  --f-display: 'Akina', 'Arial Black', Impact, sans-serif;
  --f-body:    'Google Sans', 'Google Sans Text', 'DM Sans', -apple-system, system-ui, sans-serif;
  --f-mono:    'Space Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --t-micro: 11px;
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   clamp(28px, 4vw, 44px);
  --t-3xl:   clamp(40px, 7vw, 104px);   /* section titles */
  --t-hero:  clamp(60px, 13vw, 190px);  /* monster hero */
  --t-ghost: clamp(120px, 26vw, 440px); /* ghost outline type */

  /* ── SPACING — base 4px ───────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 144px;
  --gutter:    clamp(20px, 4.5vw, 60px);
  --section-y: clamp(56px, 9vw, 128px);
  --header-h:  68px;
  --container: 1400px;
  --container-wide: 1680px;

  /* ── RADII / BORDERS / SHADOWS (comic) ─────────────────── */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --bw: 3px;                       /* ink stroke weight */
  --ink-border: var(--bw) solid var(--ink);
  --sh-1: 4px 4px 0 var(--ink);    /* hard comic shadow */
  --sh-2: 6px 6px 0 var(--ink);
  --sh-3: 10px 10px 0 var(--ink);
  --sh-press: 1px 1px 0 var(--ink);

  /* ── MOTION ────────────────────────────────────────────── */
  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* default UI */
  --e-expo:  cubic-bezier(0.16, 1, 0.3, 1);    /* snappy */
  --e-spring:cubic-bezier(0.34, 1.56, 0.64, 1);/* delight, sparingly */
  --d-micro: 140ms;
  --d-base:  240ms;
  --d-slow:  480ms;
  --d-enter: 640ms;

  /* z-index scale — semantic, never 9999 */
  --z-base: 1; --z-decor: 3; --z-sticky: 50; --z-header: 100;
  --z-album: 300; --z-modal: 600; --z-fx: 700; --z-cursor: 900; /* cursor always on top, incl. over modal */
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--ink);
}
body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;            /* clip keeps sticky alive (vs hidden) */
}
img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; outline: none; }
::selection { background: var(--do); color: var(--paper); }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Focus — visible everywhere (impeccable) */
:focus-visible {
  outline: 3px solid var(--do);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── DÓ-PAPER GRAIN — fixed, behind content ────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.12 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.16;
}

/* Smooth-scroll (Lenis) hooks */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }

/* ── REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── UTILITY: ink-stamp + halftone helpers ─────────────── */
.u-halftone {
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px);
  background-size: 12px 12px;
}
.u-stamp {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.u-screen-reader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}