/* ============================================================
   TOKENS.CSS — Design System Variables
   Portal Ekonomi Map — Desa Polobogo
   Palette: "Tanah & Kebun Merbabu"
   ============================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────── */

  /* Base — terinspirasi biji kopi & tanah vulkanis Merbabu */
  --ink:           #231810;   /* sangat gelap, bukan hitam murni */
  --espresso:      #3D2415;   /* dark surface, ampas kopi */
  --sienna:        #8C4A2F;   /* aksen utama — tanah merah lereng */
  --clay:          #9E5B38;   /* hover sienna */
  --amber:         #B87A3D;   /* aksen sekunder — teh jawa */
  --amber-light:   #C9924F;   /* amber lebih terang */
  --sage:          #5E7052;   /* hijau daun pisang setengah layu */
  --sage-light:    #7A9170;   /* sage di atas background gelap */
  --sage-muted:    #47573C;   /* sage lebih tua/dalam */

  /* Backgrounds */
  --bg-parchment:  #F0E6CF;   /* background utama — kertas tua kusam */
  --bg-cream:      #FAF5EA;   /* card surface — santan kelapa */
  --bg-dark:       #1C1108;   /* section gelap — malam di kebun */
  --bg-dark-soft:  #2A1A0E;   /* dark surface sedikit terang */

  /* Borders & Dividers */
  --mist:          #C8BCA5;   /* kabut lereng gunung */
  --border-warm:   rgba(35, 24, 16, 0.10);
  --border-strong: rgba(35, 24, 16, 0.20);

  /* Text */
  --text-primary:   #231810;
  --text-secondary: #5C4A38;   /* lebih gelap dari mist, lebih WCAG-compliant */
  --text-subtle:    #8C7A68;
  --text-on-dark:   #F0E6CF;
  --text-on-dark-subtle: rgba(240, 230, 207, 0.60);

  /* Overlay */
  --overlay-dark:  rgba(28, 17, 8, 0.65);
  --overlay-hero:  linear-gradient(
                     to bottom,
                     rgba(28, 17, 8, 0.08) 0%,
                     rgba(28, 17, 8, 0.30) 55%,
                     rgba(28, 17, 8, 0.78) 100%
                   );

  /* Category Colors — UMKM */
  --cat-kopi:      #6B3F2A;
  --cat-kuliner:   #B85230;
  --cat-kerajinan: #7059A0;
  --cat-pertanian: #4A7C59;
  --cat-jasa:      #4A6080;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Lora', Georgia, serif;
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:   'Cormorant Garamond', Georgia, serif;

  /* Size Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.0625rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   6rem;

  /* Line Height */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;
  --leading-loose:   2.0;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.20em;

  /* ── SPACING (8px base) ─────────────────────────────────── */

  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;
  --sp-40:  10rem;

  /* Container Padding */
  --px-mobile:  1.25rem;
  --px-tablet:  2.5rem;
  --px-desktop: 5rem;

  /* Max Widths */
  --max-w:       1280px;
  --max-w-prose: 720px;
  --max-w-narrow: 560px;

  /* ── BORDER RADIUS ──────────────────────────────────────── */

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(35, 24, 16, 0.08), 0 1px 2px rgba(35, 24, 16, 0.05);
  --shadow-md:  0 4px 12px rgba(35, 24, 16, 0.10), 0 2px 6px rgba(35, 24, 16, 0.06);
  --shadow-lg:  0 10px 30px rgba(35, 24, 16, 0.12), 0 4px 12px rgba(35, 24, 16, 0.07);
  --shadow-xl:  0 20px 50px rgba(35, 24, 16, 0.16), 0 8px 20px rgba(35, 24, 16, 0.09);
  --shadow-inset: inset 0 1px 3px rgba(35, 24, 16, 0.08);

  /* ── ANIMATION ───────────────────────────────────────────── */

  --ease-out:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-swift:  cubic-bezier(0.19, 1, 0.22, 1);

  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   600ms;
  --dur-slower: 900ms;
  --dur-reveal: 700ms;

  /* ── Z-INDEX ─────────────────────────────────────────────── */

  --z-base:    0;
  --z-above:   10;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-top:     999;
}