/* === FIJI THINGS TO DO — Design Tokens === */
/* Brand: deep forest green / tropical lime / warm sand */

:root, [data-theme="light"] {
  /* Surfaces */
  --color-bg: #f6f7f4;
  --color-surface: #ffffff;
  --color-surface-2: #f0f4ef;
  --color-surface-offset: #e8efe6;
  --color-divider: #d4ddd2;
  --color-border: #c8d5c5;

  /* Text */
  --color-text: #1a2e1a;
  --color-text-muted: #4a6349;
  --color-text-faint: #8aaa87;
  --color-text-inverse: #f6f7f4;

  /* Brand greens */
  --color-primary: #1a5c2a;        /* deep forest green */
  --color-primary-hover: #144821;
  --color-primary-active: #0e3317;
  --color-primary-light: #e8f4ea;

  /* AI accent — electric teal */
  --color-ai: #00b4a0;
  --color-ai-hover: #008f7e;
  --color-ai-glow: rgba(0, 180, 160, 0.2);

  /* Lime accent (nav, highlights) */
  --color-lime: #5cb85c;
  --color-lime-hover: #44a044;
  --color-lime-light: #e8f5e8;

  /* Gold for prices/CTAs */
  --color-gold: #e8a020;
  --color-gold-hover: #cc8a10;
  --color-gold-light: #fef6e4;

  /* Status */
  --color-success: #2e7d32;
  --color-error: #c62828;

  /* Hero — deep jungle */
  --color-hero-bg: #0d2e18;
  --color-hero-overlay: rgba(10, 30, 15, 0.72);

  /* Nav */
  --color-nav-bg: #0d2e18;
  --color-nav-text: #e8f5e8;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(13,46,24,0.08);
  --shadow-md: 0 4px 16px rgba(13,46,24,0.10);
  --shadow-lg: 0 12px 40px rgba(13,46,24,0.14);
  --shadow-card: 0 2px 8px rgba(13,46,24,0.08), 0 0 0 1px rgba(13,46,24,0.04);

  /* Spacing */
  --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;

  /* Type */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Layout */
  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1280px;

  /* Transitions */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);

  /* AI chat */
  --chat-bg: #ffffff;
  --chat-user-bg: #1a5c2a;
  --chat-user-text: #ffffff;
  --chat-ai-bg: #f0f9f1;
  --chat-ai-border: #c8e6c9;
}

[data-theme="dark"] {
  --color-bg: #0a1a0c;
  --color-surface: #112014;
  --color-surface-2: #162a18;
  --color-surface-offset: #1a3020;
  --color-divider: #243828;
  --color-border: #2e4832;
  --color-text: #d4e8d0;
  --color-text-muted: #8aaa87;
  --color-text-faint: #4a6349;
  --color-text-inverse: #0a1a0c;
  --color-primary: #5cb85c;
  --color-primary-hover: #44a044;
  --color-primary-active: #2e8b2e;
  --color-primary-light: #1a3020;
  --color-ai: #00d4bc;
  --color-ai-hover: #00b4a0;
  --color-ai-glow: rgba(0, 212, 188, 0.2);
  --color-lime: #7ed07e;
  --color-lime-hover: #5cb85c;
  --color-lime-light: #1a3020;
  --color-gold: #ffc234;
  --color-gold-hover: #e8a020;
  --color-gold-light: #2a2010;
  --color-hero-bg: #050e07;
  --color-hero-overlay: rgba(5, 14, 7, 0.78);
  --color-nav-bg: #050e07;
  --color-nav-text: #d4e8d0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --chat-bg: #112014;
  --chat-user-bg: #5cb85c;
  --chat-user-text: #0a1a0c;
  --chat-ai-bg: #162a18;
  --chat-ai-border: #2e4832;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0a1a0c;
    --color-surface: #112014;
    --color-surface-2: #162a18;
    --color-surface-offset: #1a3020;
    --color-divider: #243828;
    --color-border: #2e4832;
    --color-text: #d4e8d0;
    --color-text-muted: #8aaa87;
    --color-text-faint: #4a6349;
    --color-text-inverse: #0a1a0c;
    --color-primary: #5cb85c;
    --color-primary-hover: #44a044;
    --color-primary-light: #1a3020;
    --color-ai: #00d4bc;
    --color-ai-glow: rgba(0, 212, 188, 0.2);
    --color-gold: #ffc234;
    --color-hero-bg: #050e07;
    --color-nav-bg: #050e07;
    --color-nav-text: #d4e8d0;
    --chat-bg: #112014;
    --chat-user-bg: #5cb85c;
    --chat-ai-bg: #162a18;
    --chat-ai-border: #2e4832;
  }
}