/* ============================================================
   Gaon Dry Fruits — Design Tokens & Webfonts
   Load this BEFORE style.css on every page.
   Webfonts are now loaded via <link> in HTML head for fastest discovery
   (see index.html/shop.html etc. for preconnect + stylesheet).
   ============================================================ */

:root {
  /* ---------------- typography ---------------- */
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* ---------------- radius scale ---------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---------------- spacing scale ---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ---------------- z-index scale ---------------- */
  --z-header: 100;
  --z-bottomnav: 150;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---------------- semantic status ---------------- */
  --success: #1d6b35;
  --success-soft: #e4f3e8;
  --warning: #a06b00;
  --warning-soft: #fdf3e0;
  --info: #20589b;
  --info-soft: #e7effa;
  --danger-soft: #fdecea;

  /* ---------------- gold family (absorbs hardcoded hexes) ---------------- */
  --gold-light: #ffe9a8;
  --gold-bright: #ffd76a;
  --gold-mid: #e6c25a;
  --gold-deep: #d9b23c;
  --gold-ink: #3a2c05;

  /* ---------------- easing ---------------- */
  --ease: cubic-bezier(.22, .9, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------------- header & safe-area ---------------- */
  --header-h: 72px;
  --header-h-m: 52px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------------- layout dimensions (responsive) ---------------- */
  --container-max: 1280px;
  --container-px: clamp(16px, 4vw, 28px);
  --container-pad: 92%;
  --section-py: clamp(48px, 7vw, 84px);
  --section-gap: clamp(28px, 4vw, 52px);
  --page-hero-py: clamp(28px, 4vw, 44px);
  --wrap-py: clamp(28px, 5vw, 70px);
  --auth-page-py: clamp(20px, 4vw, 40px);
  --hero-h: clamp(300px, 78vh, 680px);
  --cat-card-ratio: 4 / 4.6;
  --prod-card-ratio: 1 / 1;
  --deal-strip-pad: clamp(18px, 3vw, 36px);
  --deal-strip-gap: clamp(12px, 2vw, 28px);
  --footer-pad: clamp(36px, 5vw, 64px);
  --cat-circle-size: clamp(96px, 10vw, 120px);
  --btn-h: 44px;
  --input-h: 48px;
  --modal-w: 520px;
  --drawer-w: clamp(320px, 92%, 430px);
}