/* ============================================
   Design Tokens - Revive Group
   ============================================ */

   :root {
    /* Brand Colors */
    --color-primary: #009c43;
    --color-primary-dark: #007a34;
    --color-primary-light: #e6f7ed;
    --color-primary-50: #f0fdf4;
    --color-primary-100: #dcfce7;
    --color-primary-200: #bbf7d0;
    --color-primary-500: #22c55e;
    --color-primary-700: #15803d;
  
    /* Neutral Colors */
    --color-text: #1a1a1a;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;
    --color-bg: #fff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-dark: #0b1510;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
  
    /* Accent Colors */
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-indigo-700: #4338ca;
    --color-purple-600: #9333ea;
    --color-pink-700: #be185d;
    --color-amber-600: #d97706;
    --color-orange-700: #c2410c;
    --color-cyan-500: #06b6d4;
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-300: #6ee7b7;
    --color-emerald-600: #059669;

    /* News category accents */
    --news-cat-eco-park: var(--color-primary);
    --news-cat-eco-park-dark: var(--color-primary-dark);
    --news-cat-eco-park-light: var(--color-primary-light);
    --news-cat-technology: var(--color-blue-600);
    --news-cat-technology-dark: #1d4ed8;
    --news-cat-technology-light: #eff6ff;
    --news-cat-global-news: var(--color-indigo-700);
    --news-cat-global-news-dark: #3730a3;
    --news-cat-global-news-light: #eef2ff;
    --news-cat-sustainability: var(--color-emerald-600);
    --news-cat-sustainability-dark: #047857;
    --news-cat-sustainability-light: var(--color-emerald-100);
  
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 48px;
    --space-2xl: 96px;
    --space-3xl: 128px;
  
    /* Container */
    --container-max: 1280px;
    --container-padding: 16px;
  
    /* Vertical padding for stacked content sections */
    --section-stack-padding-y: var(--space-xl);
  
    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
  
    /* Shadows */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-hero: clamp(2.5rem, 8vw, 7rem);
    --font-size-h1: clamp(2rem, 5vw, 4.5rem);
    --font-size-h2: clamp(1.75rem, 4vw, 3.5rem);
    --font-size-h3: clamp(1.5rem, 3vw, 2.5rem);
  
    /* Line Heights */
    --line-height-tight: 1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 1.8;
  
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  
    /* Section eyebrow badge (pill label above headings) */
    --ui-eyebrow-padding-y: 8px;
    --ui-eyebrow-padding-x: 16px;
    --ui-eyebrow-font-size: var(--font-size-sm);
    --ui-eyebrow-font-weight: var(--font-weight-bold);
    --ui-eyebrow-letter-spacing: 0.1em;
    --ui-eyebrow-radius: var(--radius-full);
    --ui-eyebrow-bg: var(--color-emerald-100);
    --ui-eyebrow-color: var(--color-primary);
    --ui-eyebrow-border: var(--color-primary-200);
    --ui-eyebrow-margin-bottom: 32px;

    /* Display stack */
    --typography-display-content-max: 600px;
    --typography-display-lede-max: 768px;
    --typography-display-title-size: clamp(2.25rem, 7vw, 7rem);
    --typography-display-title-weight: var(--font-weight-semibold);
    --typography-display-title-tracking: -0.04em;
    --typography-display-title-lh: 0.95;
    --typography-display-lede-size: clamp(1rem, 2vw, 1.5rem);
    --typography-display-lede-weight: var(--font-weight-normal);
    --typography-display-lede-lh: 1.7;

    /* Inner pages — section headings after hero (not hero/slider titles) */
    --typography-section-title-size: clamp(2.125rem, 5vw, 2.75rem);
    --typography-section-title-weight: var(--font-weight-bold);
    --typography-section-title-lh: 1.15;
    --typography-section-title-tracking: -0.03em;
    --typography-section-subtitle-size: clamp(1.0625rem, 1.8vw, 1.125rem);
    --typography-section-subtitle-weight: var(--font-weight-normal);
    --typography-section-subtitle-lh: 1.55;
    --typography-section-card-title-size: clamp(1.5rem, 2.8vw, 1.75rem);
    --typography-section-card-title-weight: var(--font-weight-bold);
    --typography-section-card-title-lh: 1.25;
    --typography-section-card-title-tracking: -0.02em;
  
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-slower: 700ms ease;
  
    /* Primary nav stack (fixed bar) — use for hero overlays */
    --nav-offset-top: clamp(20px, 2.5vw, 30px);
    --nav-bar-padding-y: clamp(12px, 1.6vw, 18px);
    --nav-bar-content-height: max(clamp(40px, 9vw, 44px), clamp(28px, 7vw, 40px));
    --nav-clearance: calc(
      var(--nav-offset-top) +
      var(--nav-bar-padding-y) * 2 +
      var(--nav-bar-content-height) +
      16px
    );

    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* Viewport edge blur (transparent backdrop only) */
    --bottom-edge-fade-height: 3.25cm;
    --top-edge-fade-height: 5.5cm;
    --bottom-edge-fade-blur-peak: 2cm;
    --bottom-edge-fade-blur-build: 0.55cm;
  
    /* Breakpoints */
    --bp-tablet: 768px;
    --bp-laptop: 1024px;
    --bp-desktop: 1440px;
  }
  
  @media (max-width: 380px) {
    :root {
      --nav-bar-padding-y: 10px;
    }
  }

  @media (min-width: 768px) {
    :root {
      --container-padding: 24px;
      --section-stack-padding-y: var(--space-2xl);
    }
  }