/* ============================================================
   DESIGN TOKENS — variables.css
   All design decisions live here. Edit this file to retheme
   the entire site.
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --clr-primary:       #d49a32;
  --clr-primary-hover: #bf8829;
  --clr-primary-light: #e0b45e;
  --clr-primary-pale:  #FFF4ED;
  --clr-gold:          #D3A266;

  /* ---- Neutrals ---- */
  --clr-navy:          #111827;
  --clr-navy-mid:      #1F2937;
  --clr-cream:         #F8F7F5;
  --clr-cream-dark:    #F1EFEA;
  --clr-white:         #FFFFFF;
  --clr-dark:          #0F172A;
  --clr-gray-700:      #334155;
  --clr-gray-500:      #64748B;
  --clr-gray-300:      #CBD5E1;
  --clr-gray-100:      #E2E8F0;
  --clr-border:        #E5E7EB;

  /* ---- Hội An Cultural Colors ---- */
  --clr-hoian-yellow:  #F5C518;   /* iconic ochre/yellow ancient town walls */
  --clr-hoian-amber:   #D4922A;   /* warm amber lantern glow */
  --clr-hoian-red:     #C0392B;   /* traditional lantern red */
  --clr-hoian-jade:    #2E8B57;   /* rừng dừa coconut forest green */
  --clr-hoian-teal:    #1A6B6B;   /* Thu Bon river teal */
  --clr-hoian-sand:    #F2E8D9;   /* ancient stone sand color */
  --clr-hoian-terracotta: #C97B55; /* terracotta roof tiles */

  /* ---- Tag Colors ---- */
  --clr-tag-cooking:   #E07B39;
  --clr-tag-boat:      #3A7FD5;
  --clr-tag-cycling:   #3A9B6B;
  --clr-tag-coffee:    #B07A30;
  --clr-tag-combo:     #7B5EA7;

  /* ---- Typography ---- */
  --ff-sans:    'Manrope', system-ui, -apple-system, sans-serif;
  --ff-display: var(--ff-sans);
  --ff-serif:   var(--ff-sans);
  --ff-script:  var(--ff-sans);

  /* ---- Font Sizes (fluid) ---- */
  --fs-10: 0.625rem;   /*  10px */
  --fs-11: 0.6875rem;  /*  11px */
  --fs-12: 0.75rem;    /*  12px */
  --fs-13: 0.8125rem;  /*  13px */
  --fs-14: 0.875rem;   /*  14px */
  --fs-15: 0.9375rem;  /*  15px */
  --fs-16: 1rem;       /*  16px */
  --fs-18: 1.125rem;   /*  18px */
  --fs-20: 1.25rem;    /*  20px */
  --fs-22: 1.375rem;   /*  22px */
  --fs-24: 1.5rem;     /*  24px */
  --fs-28: 1.75rem;    /*  28px */
  --fs-32: 2rem;       /*  32px */
  --fs-36: 2.25rem;    /*  36px */
  --fs-42: 2.625rem;   /*  42px */
  --fs-48: 3rem;       /*  48px */
  --fs-56: 3.5rem;     /*  56px */
  --fs-72: 4.5rem;     /*  72px */
  --fs-88: 5.5rem;     /*  88px */

  /* ---- 8pt Typography Scale ---- */
  --type-caption: 0.75rem;  /* 12 */
  --type-body: 1rem;        /* 16 */
  --type-h4: 1.5rem;        /* 24 */
  --type-h3: 2rem;          /* 32 */
  --type-h2: 2.5rem;        /* 40 */
  --type-h1: 3rem;          /* 48 */

  /* ---- Font Weights ---- */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* ---- Line Heights ---- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* ---- Letter Spacing ---- */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-wider:   0.04em;
  --ls-widest:  0.08em;

  /* ---- Spacing Scale ---- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32: 128px;

  /* ---- Border Radius ---- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 4px rgba(0,0,0,.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.16);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,.20);
  --shadow-orange: 0 8px 28px rgba(212,154,50,.38);
  --shadow-navy:   0 8px 28px rgba(26,35,50,.35);

  /* ---- Transitions ---- */
  --t-fast:   all 0.18s ease;
  --t-base:   all 0.28s ease;
  --t-slow:   all 0.45s cubic-bezier(.25,.46,.45,.94);
  --t-spring: all 0.5s cubic-bezier(.34,1.56,.64,1);

  /* ---- Container ---- */
  --container-max:  1280px;
  --container-pad:  32px;

  /* ---- Section Padding ---- */
  --section-py: 88px;

  /* ---- Z-Index ---- */
  --z-base:    1;
  --z-above:   10;
  --z-dropdown:100;
  --z-header:  1000;
  --z-overlay: 1500;
  --z-modal:   2000;
}