/**
 * Koh Lanta Island — Design tokens
 * Jungle Gold palette · editorial + bento + biophilic direction.
 *
 * This is the SINGLE source of truth for every visual value in the theme.
 * No hardcoded colours, sizes, or spacing should appear anywhere else in the
 * theme CSS. Re-theme the whole site by editing this file alone.
 *
 * Design language (grounded in ui-ux-pro-max):
 *   - Editorial/Magazine #66  → long-form & article hierarchy
 *   - Bento Grid #39/#53      → hub & feature modules
 *   - Organic Biophilic #42   → soft layered shadows, generous radii
 *   - Gradient Mesh #65 + Glass #3 → hero wash & frosted header (accents only)
 */

:root {
  /* === Jungle Gold palette — core === */
  --color-primary:         #1B4332;   /* Deep forest green — nav, headings, CTAs */
  --color-primary-dark:    #0F2B1F;   /* Hover/pressed states */
  --color-primary-light:   #2D6A4F;   /* Lighter interactive states */
  --color-primary-50:      #E8F1EB;   /* Tint wash */
  --color-primary-100:     #CFE3D6;

  --color-accent:          #E9B949;   /* Golden yellow — highlights, tags, buttons */
  --color-accent-dark:     #C49A0A;   /* Accent hover */
  --color-accent-light:    #F6D784;   /* Soft golden glow */
  --color-accent-text:     #2A1F04;   /* Text on accent backgrounds */

  /* Tropical secondary — ocean teal adds depth & “standout” without leaving the palette */
  --color-ocean:           #1C7C7C;
  --color-ocean-dark:      #115E5E;
  --color-ocean-light:     #5FB8B0;

  /* Warm coral — used sparingly for energy (sunsets, “hot” tags) */
  --color-coral:           #E76F51;

  /* === Surfaces & neutrals === */
  --color-bg:              #F4F8F1;   /* Page background — soft jungle mist */
  --color-bg-warm:         #FBF7EC;   /* Sand-tinted alternate section bg */
  --color-surface:         #FFFFFF;   /* Cards, panels — clean white for depth */
  --color-surface-soft:    #ECF6EF;   /* Very light green surface */
  --color-surface-2:       #DBEEE1;   /* Deeper surface — callout boxes */
  --color-border:          #DCE9DD;   /* Default borders — softer than before */
  --color-border-strong:   #A6CDB1;   /* Emphasis borders */

  --color-text:            #14241B;   /* Primary body text */
  --color-text-muted:      #51705C;   /* Secondary / helper text */
  --color-text-inverse:    #F4F8F1;   /* Text on dark backgrounds */
  --color-text-on-accent:  #2A1F04;   /* Text on golden backgrounds */
  --color-white:           #FFFFFF;

  /* === Semantic state colours === */
  --color-success:         #2D6A4F;
  --color-danger:          #C0392B;
  --color-info:            #1C7C7C;

  /* === Overlays & glass === */
  --color-overlay:         rgba(15, 33, 25, 0.62);     /* Hero image overlays */
  --color-overlay-soft:    rgba(15, 33, 25, 0.30);
  --glass-bg:              rgba(20, 36, 27, 0.55);      /* Frosted dark header */
  --glass-bg-light:        rgba(255, 255, 255, 0.65);   /* Frosted light surface */
  --glass-border:          rgba(255, 255, 255, 0.18);
  --glass-blur:            16px;

  /* === Gradients (mesh / aurora accents) === */
  --gradient-hero:         radial-gradient(120% 120% at 15% 10%, rgba(28, 124, 124, 0.55) 0%, transparent 55%),
                           radial-gradient(120% 120% at 90% 20%, rgba(233, 185, 73, 0.40) 0%, transparent 50%),
                           linear-gradient(160deg, rgba(15, 43, 31, 0.55) 0%, rgba(15, 43, 31, 0.85) 100%);
  --gradient-accent:       linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  --gradient-primary:      linear-gradient(150deg, var(--color-primary-light) 0%, var(--color-primary) 60%, var(--color-primary-dark) 100%);
  --gradient-sunset:       linear-gradient(120deg, var(--color-coral) 0%, var(--color-accent) 100%);
  --gradient-surface:      linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);

  /* === Typography === */
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;  /* Editorial serif */
  --font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* Fluid type scale — clamp(min, preferred, max) for responsive headings */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --font-size-xl:   clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --font-size-2xl:  clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
  --font-size-3xl:  clamp(2.4rem, 1.8rem + 3vw, 3.5rem);
  --font-size-4xl:  clamp(3rem, 2rem + 5vw, 5.25rem);

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --line-height-tight:  1.08;
  --line-height-snug:   1.3;
  --line-height-base:   1.7;
  --line-height-loose:  1.9;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-tighter: -0.045em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.06em;
  --letter-spacing-wider:   0.14em;

  /* === Spacing scale (4/8 rhythm) === */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Fluid section rhythm */
  --space-section: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* === Layout === */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* === Shadows — layered, soft, biophilic (low-opacity green-tinted) === */
  --shadow-xs:  0 1px 2px rgba(15, 33, 25, 0.06);
  --shadow-sm:  0 2px 6px rgba(15, 33, 25, 0.07);
  --shadow-md:  0 6px 18px rgba(15, 33, 25, 0.09), 0 2px 6px rgba(15, 33, 25, 0.05);
  --shadow-lg:  0 16px 40px rgba(15, 33, 25, 0.12), 0 4px 12px rgba(15, 33, 25, 0.06);
  --shadow-xl:  0 28px 70px rgba(15, 33, 25, 0.16), 0 8px 20px rgba(15, 33, 25, 0.08);
  --shadow-accent: 0 12px 30px rgba(196, 154, 10, 0.30);   /* Golden glow under CTAs */
  --shadow-ring:   0 0 0 1px var(--color-border);

  /* === Motion === */
  --transition-fast:   140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   420ms cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo for reveals */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);     /* gentle overshoot */

  /* === Z-index stack === */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* === Monkey Business brand theming (component-scoped overrides) === */
  --mb-bg:     var(--gradient-primary);
  --mb-accent: var(--color-accent);
  --mb-text:   var(--color-text-inverse);
}