/* ================================================================
   DESIGN TOKENS
   All colors, fonts, spacing, and shared values as CSS custom properties.
   ================================================================ */

:root {
  /* --- Greens (primary) --- */
  --clr-green:         #1a3a2a;
  --clr-green-deep:    #0f2218;
  --clr-green-mid:     #2d5c42;
  --clr-green-light:   #3d7a58;
  --clr-green-mist:    #e8f0eb;

  /* --- Chartreuse (accent) --- */
  --clr-chartreuse:       #c8f000;
  --clr-chartreuse-muted: #a8cc00;
  --clr-chartreuse-bright:#e8ff66;
  --clr-chartreuse-mist:  #f2facc;

  /* --- Neutrals --- */
  --clr-ivory:   #f9f6ef;
  --clr-ivory-2: #f2ede3;
  --clr-linen:   #ece5d8;
  --clr-ink:     #0d1a12;
  --clr-smoke:   #6b7d72;
  --clr-mist:    #9eb0a4;

  /* --- Borders / wires --- */
  --clr-wire:  rgba(26, 58, 42, .12);
  --clr-wire-2:rgba(26, 58, 42, .2);

  /* --- Category accent colors --- */
  --clr-beauty-bg:  #3a1a4a;
  --clr-beauty-txt: #d4aaee;
  --clr-travel-bg:  #1a2d4a;
  --clr-travel-txt: #aacdee;
  --clr-fun-bg:     #3a2d0a;
  --clr-fun-txt:    #eeccaa;

  /* --- Fonts --- */
  --ff-display: 'Bebas Neue', sans-serif;
  --ff-body:    'Syne', sans-serif;
  --ff-serif:   'Lora', serif;

  /* --- Spacing scale --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 72px;

  /* --- Border radius --- */
  --radius: 2px;

  /* --- Transitions --- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --speed-fast: .18s;
  --speed-mid:  .22s;
  --speed-slow: .45s;

  /* --- Shadows --- */
  --shadow-card:  0 12px 48px rgba(26, 58, 42, .14);
  --shadow-heavy: 0 16px 56px rgba(26, 58, 42, .3);
  --shadow-toast: 0 8px 32px rgba(26, 58, 42, .4);

  /* --- Layout --- */
  --nav-height: 68px;
  --page-gutter: 48px;
  --content-max: 780px;
}