/* ═══════════════════════════════════════════════════════════
   WasteWise Indonesia — Design Tokens (variables.css)
   All design tokens: colors, typography, spacing, shadows, etc.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Primary — Emerald Green ─────────────────────────── */
  --primary-50:  hsl(152, 68%, 96%);
  --primary-100: hsl(152, 60%, 88%);
  --primary-200: hsl(152, 56%, 76%);
  --primary-300: hsl(152, 52%, 62%);
  --primary-400: hsl(152, 50%, 50%);
  --primary-500: hsl(152, 56%, 40%);
  --primary-600: hsl(152, 60%, 32%);
  --primary-700: hsl(152, 64%, 24%);
  --primary-800: hsl(152, 68%, 16%);
  --primary-900: hsl(152, 72%, 10%);

  /* ─── Neutral — Cool Gray ─────────────────────────────── */
  --neutral-0:   hsl(0, 0%, 100%);
  --neutral-50:  hsl(210, 20%, 96%);
  --neutral-100: hsl(210, 16%, 90%);
  --neutral-200: hsl(210, 14%, 78%);
  --neutral-300: hsl(210, 12%, 62%);
  --neutral-400: hsl(210, 10%, 46%);
  --neutral-500: hsl(210, 12%, 34%);
  --neutral-600: hsl(210, 14%, 22%);
  --neutral-700: hsl(210, 18%, 16%);
  --neutral-800: hsl(210, 22%, 11%);
  --neutral-850: hsl(210, 24%, 9%);
  --neutral-900: hsl(210, 28%, 7%);
  --neutral-950: hsl(210, 32%, 5%);

  /* ─── Waste Category Colors ───────────────────────────── */
  --color-organic:    hsl(142, 60%, 45%);
  --color-inorganic:  hsl(210, 70%, 55%);
  --color-hazardous:  hsl(0, 70%, 55%);
  --color-residual:   hsl(210, 8%, 50%);
  --color-electronic: hsl(32, 80%, 55%);

  /* ─── Feedback Colors ─────────────────────────────────── */
  --color-success: hsl(142, 60%, 45%);
  --color-warning: hsl(38, 92%, 55%);
  --color-error:   hsl(0, 72%, 55%);
  --color-info:    hsl(210, 70%, 55%);

  /* ─── Special Effects ─────────────────────────────────── */
  --glow-primary: 0 0 20px hsla(152, 56%, 40%, 0.25);
  --glow-strong:  0 0 30px hsla(152, 56%, 40%, 0.4);

  --glass-bg:     hsla(210, 22%, 11%, 0.65);
  --glass-border: 1px solid hsla(152, 40%, 50%, 0.1);
  --glass-blur:   blur(20px);

  --gradient-hero: linear-gradient(135deg, hsl(210, 28%, 7%) 0%, hsl(160, 30%, 10%) 50%, hsl(210, 28%, 7%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(152, 56%, 40%) 0%, hsl(172, 50%, 40%) 100%);
  --gradient-accent-hover: linear-gradient(135deg, hsl(152, 56%, 45%) 0%, hsl(172, 50%, 45%) 100%);

  /* ─── Typography ──────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-xs:    clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm:    clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base:  clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl:    clamp(1.15rem, 1.05rem + 0.5vw, 1.25rem);
  --text-2xl:   clamp(1.35rem, 1.15rem + 1vw, 1.5rem);
  --text-3xl:   clamp(1.6rem, 1.3rem + 1.5vw, 1.875rem);
  --text-4xl:   clamp(2rem, 1.5rem + 2.5vw, 2.5rem);
  --text-5xl:   clamp(2.5rem, 1.8rem + 3.5vw, 3.25rem);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;

  /* ─── Spacing (8px base) ──────────────────────────────── */
  --space-0:   0;
  --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;

  /* ─── Border Radius ───────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* ─── Shadows ─────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px hsla(0, 0%, 0%, 0.3);
  --shadow-sm:  0 1px 3px hsla(0, 0%, 0%, 0.3), 0 1px 2px hsla(0, 0%, 0%, 0.2);
  --shadow-md:  0 4px 6px hsla(0, 0%, 0%, 0.25), 0 2px 4px hsla(0, 0%, 0%, 0.15);
  --shadow-lg:  0 10px 15px hsla(0, 0%, 0%, 0.25), 0 4px 6px hsla(0, 0%, 0%, 0.15);
  --shadow-xl:  0 20px 25px hsla(0, 0%, 0%, 0.25), 0 8px 10px hsla(0, 0%, 0%, 0.15);
  --shadow-inner: inset 0 2px 4px hsla(0, 0%, 0%, 0.2);

  /* ─── Transitions ─────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* ─── Layout ──────────────────────────────────────────── */
  --header-height: 64px;
  --bottom-nav-height: 68px;
  --content-max-width: 1200px;
  --content-padding: var(--space-4);
}

/* ─── Light Mode Override ──────────────────────────────── */

[data-theme="light"] {
  --neutral-0:   hsl(210, 28%, 7%);
  --neutral-50:  hsl(210, 14%, 14%);
  --neutral-100: hsl(210, 14%, 22%);
  --neutral-200: hsl(210, 12%, 34%);
  --neutral-300: hsl(210, 10%, 46%);
  --neutral-400: hsl(210, 10%, 56%);
  --neutral-500: hsl(210, 8%, 66%);
  --neutral-600: hsl(210, 10%, 82%);
  --neutral-700: hsl(210, 14%, 90%);
  --neutral-800: hsl(210, 16%, 94%);
  --neutral-850: hsl(210, 18%, 96%);
  --neutral-900: hsl(210, 20%, 98%);
  --neutral-950: hsl(0, 0%, 100%);

  --glass-bg:     hsla(0, 0%, 100%, 0.85);
  --glass-border: 1px solid hsla(210, 14%, 80%, 0.5);
  --glass-blur:   blur(20px);

  --gradient-hero: linear-gradient(135deg, hsl(152, 30%, 96%) 0%, hsl(160, 30%, 92%) 50%, hsl(152, 30%, 96%) 100%);

  --shadow-xs:  0 1px 2px hsla(0, 0%, 0%, 0.06);
  --shadow-sm:  0 1px 3px hsla(0, 0%, 0%, 0.08), 0 1px 2px hsla(0, 0%, 0%, 0.04);
  --shadow-md:  0 4px 6px hsla(0, 0%, 0%, 0.08), 0 2px 4px hsla(0, 0%, 0%, 0.04);
  --shadow-lg:  0 10px 15px hsla(0, 0%, 0%, 0.08), 0 4px 6px hsla(0, 0%, 0%, 0.04);
  --shadow-xl:  0 20px 25px hsla(0, 0%, 0%, 0.08), 0 8px 10px hsla(0, 0%, 0%, 0.04);

  --glow-primary: 0 0 20px hsla(152, 56%, 40%, 0.15);
  --glow-strong:  0 0 30px hsla(152, 56%, 40%, 0.25);
}

/* ─── Theme Toggle Button ──────────────────────────────── */

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--neutral-700);
  color: var(--neutral-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  position: relative;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--neutral-800);
  color: var(--primary-400);
  border-color: var(--primary-500);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  position: absolute;
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}

/* Dark mode: show moon, hide sun */
.theme-icon-dark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.theme-icon-light {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

/* Light mode: show sun, hide moon */
[data-theme="light"] .theme-icon-dark {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

[data-theme="light"] .theme-icon-light {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Mobile: show toggle, Desktop: hide (shown inside nav) */
#theme-toggle-mobile {
  display: flex;
}

#theme-toggle-desktop {
  display: none;
}

@media (min-width: 768px) {
  #theme-toggle-mobile {
    display: none;
  }

  #theme-toggle-desktop {
    display: flex;
  }
}