/*
 * gmacr-tokens.css — Design tokens for Guide Me Around Costa Rica
 * All variables namespaced with --gmacr- to avoid theme collisions.
 * Adjust color hex values after inspecting the final logo against the live site.
 */

:root {
  /* ─── Brand Colors ─────────────────────────────────────────────────────── */
  /* Deep jungle greens — naturalist brand */
  --gmacr-green-900: #1B2E2A;
  --gmacr-green-800: #22403A;
  --gmacr-green-700: #2D6A4F;
  --gmacr-green-600: #3A8063;
  --gmacr-green-500: #52B788;
  --gmacr-green-400: #74C69D;
  --gmacr-green-300: #95D5B2;
  --gmacr-green-200: #B7E4C7;
  --gmacr-green-100: #D8F3DC;
  --gmacr-green-50:  #F0FAF3;

  /* Neutrals */
  --gmacr-cream:     #F8F4EF;
  --gmacr-cream-100: #F0EBE3;
  --gmacr-ink:       #1B2E2A;
  --gmacr-ink-80:    #354A46;
  --gmacr-muted:     #6B7280;
  --gmacr-muted-light: #9CA3AF;
  --gmacr-border:    #D1D5DB;
  --gmacr-surface:   #FFFFFF;

  /* Accent — warm amber CTA (max contrast on green backgrounds) */
  --gmacr-accent:         #F2A900;
  --gmacr-accent-dark:    #C98A00;
  --gmacr-accent-light:   #FFC940;

  /* Semantic */
  --gmacr-success:  #2D6A4F;
  --gmacr-warning:  #F2A900;
  --gmacr-error:    #DC2626;
  --gmacr-info:     #3B82F6;

  /* Availability states (accessible — not color-only) */
  --gmacr-avail-available:  #2D6A4F;
  --gmacr-avail-soldout:    #DC2626;
  --gmacr-avail-unavailable: #9CA3AF;
  --gmacr-avail-selected:    #F2A900;

  /* ─── Typography ───────────────────────────────────────────────────────── */
  --gmacr-font-head: 'Montserrat', system-ui, -apple-system, sans-serif;
  --gmacr-font-body: 'Inter', 'Lato', system-ui, -apple-system, sans-serif;
  --gmacr-font-mono: ui-monospace, 'Cascadia Code', monospace;

  /* Fluid type scale (clamp: min | preferred | max) */
  --gmacr-text-xs:   clamp(0.70rem, 0.65rem + 0.25vw, 0.75rem);
  --gmacr-text-sm:   clamp(0.813rem, 0.77rem + 0.22vw, 0.875rem);
  --gmacr-text-base: clamp(0.938rem, 0.9rem + 0.19vw, 1rem);
  --gmacr-text-md:   clamp(1.063rem, 1rem + 0.31vw, 1.125rem);
  --gmacr-text-lg:   clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
  --gmacr-text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --gmacr-text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --gmacr-text-3xl:  clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --gmacr-text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);

  --gmacr-leading-tight:  1.2;
  --gmacr-leading-snug:   1.375;
  --gmacr-leading-normal: 1.6;
  --gmacr-leading-loose:  1.75;

  --gmacr-weight-regular: 400;
  --gmacr-weight-medium:  500;
  --gmacr-weight-semibold: 600;
  --gmacr-weight-bold:    700;
  --gmacr-weight-extrabold: 800;

  /* ─── Spacing ───────────────────────────────────────────────────────────── */
  --gmacr-space-0: 0;
  --gmacr-space-1: 0.25rem;   /* 4px */
  --gmacr-space-2: 0.5rem;    /* 8px */
  --gmacr-space-3: 0.75rem;   /* 12px */
  --gmacr-space-4: 1rem;      /* 16px */
  --gmacr-space-5: 1.25rem;   /* 20px */
  --gmacr-space-6: 1.5rem;    /* 24px */
  --gmacr-space-8: 2rem;      /* 32px */
  --gmacr-space-10: 2.5rem;   /* 40px */
  --gmacr-space-12: 3rem;     /* 48px */
  --gmacr-space-16: 4rem;     /* 64px */
  --gmacr-space-20: 5rem;     /* 80px */
  --gmacr-space-24: 6rem;     /* 96px */

  /* ─── Layout ────────────────────────────────────────────────────────────── */
  --gmacr-maxw:        1200px;
  --gmacr-maxw-narrow: 760px;
  --gmacr-gutter:      clamp(1rem, 4vw, 2rem);

  /* ─── Borders & Radius ──────────────────────────────────────────────────── */
  --gmacr-radius-sm:  6px;
  --gmacr-radius:     14px;
  --gmacr-radius-lg:  20px;
  --gmacr-radius-xl:  28px;
  --gmacr-radius-full: 9999px;
  --gmacr-border-width: 1.5px;

  /* ─── Shadows ───────────────────────────────────────────────────────────── */
  --gmacr-shadow-xs: 0 1px 3px rgba(27, 46, 42, 0.08);
  --gmacr-shadow:    0 6px 24px rgba(27, 46, 42, 0.10);
  --gmacr-shadow-md: 0 12px 40px rgba(27, 46, 42, 0.14);
  --gmacr-shadow-lg: 0 20px 60px rgba(27, 46, 42, 0.18);
  --gmacr-shadow-inset: inset 0 2px 6px rgba(27, 46, 42, 0.08);

  /* ─── Transitions ───────────────────────────────────────────────────────── */
  --gmacr-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --gmacr-transition:        250ms cubic-bezier(0.4, 0, 0.2, 1);
  --gmacr-transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Z-index ────────────────────────────────────────────────────────────── */
  --gmacr-z-base:    1;
  --gmacr-z-card:    10;
  --gmacr-z-sticky:  100;
  --gmacr-z-overlay: 200;
  --gmacr-z-modal:   300;
  --gmacr-z-toast:   400;
}

/* Reduced-motion overrides — all transitions collapse to instant */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gmacr-transition-fast: 0ms;
    --gmacr-transition:      0ms;
    --gmacr-transition-slow: 0ms;
  }
}