/* ==========================================================================
   Seashore Medical & Industrial Waste Factory — Design Tokens
   variables.css — brand colors, typography, spacing, elevation
   ========================================================================== */

:root {
  /* ---- Brand: deep environmental greens ---- */
  --smw-green-950: #052018;
  --smw-green-900: #0A3528;
  --smw-green-850: #0B4030;
  --smw-green-800: #0E4433;
  --smw-green-700: #14573F;
  --smw-green-600: #177C55;
  --smw-green-500: #1B9163;

  /* ---- Accents ---- */
  --smw-emerald: #1FA971;
  --smw-emerald-strong: #178C5D;
  --smw-emerald-bright: #35C68A;
  --smw-teal: #2E9E8F;
  /* Accessible variant of the emerald accent for small text on light
     backgrounds — 5.4:1 on white, 5.0:1 on --smw-bg-soft (WCAG AA). */
  --smw-emerald-text: #15794F;

  /* ---- Navy / charcoal support ---- */
  --smw-navy-900: #0E2230;
  --smw-navy-800: #14303F;
  --smw-ink: #10201A;

  /* ---- Neutrals ---- */
  --smw-white: #FFFFFF;
  --smw-bg: #FFFFFF;
  --smw-bg-soft: #F4F7F5;
  --smw-bg-mist: #EAF2ED;
  --smw-line: #E1E8E4;
  --smw-line-strong: #CFDAD4;
  --smw-text: #22332D;
  --smw-muted: #4E6058;
  /* 5.6:1 on white, 5.2:1 on --smw-bg-soft — safe for small secondary text */
  --smw-muted-2: #5C6C64;

  /* ---- On-dark tones ---- */
  --smw-dark-bg: #072A20;
  --smw-dark-line: rgba(255, 255, 255, 0.14);
  --smw-dark-soft: rgba(255, 255, 255, 0.72);

  /* ---- Gradients ---- */
  --smw-grad-brand: linear-gradient(135deg, var(--smw-emerald) 0%, var(--smw-green-700) 100%);
  --smw-grad-deep: linear-gradient(150deg, #0C3A2C 0%, var(--smw-green-950) 78%);
  --smw-grad-hero: linear-gradient(112deg, rgba(4, 26, 19, 0.92) 8%, rgba(7, 42, 32, 0.78) 46%, rgba(10, 53, 40, 0.42) 100%);
  --smw-grad-navy: linear-gradient(140deg, var(--smw-navy-900) 0%, var(--smw-green-900) 100%);
  --smw-grad-text: linear-gradient(92deg, var(--smw-emerald-bright) 0%, #7ADFB4 55%, var(--smw-teal) 100%);

  /* ---- Typography ---- */
  --smw-font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --smw-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --smw-fs-h1: clamp(2.5rem, 5.2vw, 4.05rem);
  --smw-fs-h1-page: clamp(2.1rem, 4vw, 3.1rem);
  --smw-fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --smw-fs-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --smw-fs-h4: 1.125rem;
  --smw-fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --smw-fs-body: 1rem;
  --smw-fs-sm: 0.9rem;
  --smw-fs-eyebrow: 0.8rem;

  /* ---- Layout ---- */
  --smw-container: 1240px;
  --smw-container-wide: 1360px;
  --smw-gutter: clamp(1.25rem, 4vw, 2rem);
  --smw-section: clamp(4.25rem, 9vw, 7.25rem);
  --smw-section-sm: clamp(3rem, 6vw, 4.75rem);
  --smw-nav-h: 86px;
  --smw-nav-h-scrolled: 70px;
  --smw-topbar-h: 42px;

  /* ---- Shape ---- */
  --smw-radius-lg: 24px;
  --smw-radius: 18px;
  --smw-radius-sm: 12px;
  --smw-radius-pill: 999px;

  /* ---- Elevation ---- */
  --smw-shadow-sm: 0 1px 2px rgba(9, 33, 25, 0.05), 0 2px 8px rgba(9, 33, 25, 0.05);
  --smw-shadow-md: 0 6px 18px rgba(9, 33, 25, 0.08), 0 2px 6px rgba(9, 33, 25, 0.05);
  --smw-shadow-lg: 0 18px 44px rgba(9, 33, 25, 0.14), 0 6px 14px rgba(9, 33, 25, 0.07);
  --smw-shadow-cta: 0 12px 26px rgba(23, 140, 93, 0.32);

  /* ---- Motion ---- */
  --smw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --smw-dur: 0.3s;
  --smw-dur-slow: 0.6s;

  /* Home hero slideshow. --smw-hero-kb-time must stay longer than the slide
     interval in index.html (data-hero-interval) plus the fade, or the Ken
     Burns move finishes early and the photo visibly parks. */
  --smw-hero-fade: 1.5s;
  --smw-hero-kb-time: 10s;

  /* ---- Z-index ---- */
  --smw-z-nav: 900;
  --smw-z-menu: 1000;
  --smw-z-top: 800;

  /* ---- Focus ring ---- */
  --smw-focus-ring: 0 0 0 3px rgba(31, 169, 113, 0.45);
}