/* ==========================================================================
   BETTERWORLD DESIGN SYSTEM & THEME ENGINE (CSS VARIABLES & UTILITIES)
   Grounded in Apple Human Interface Guidelines (HIG): Clarity, Deference, Depth
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Typographic Families */
  --bw-font-sans: 'Plus Jakarta Sans', 'BetterWorld Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --bw-font-serif: 'Playfair Display', 'BetterWorld Serif', 'New York', Georgia, serif;
  --bw-font-mono: 'JetBrains Mono', 'BetterWorld Mono', 'SF Mono', Menlo, monospace;

  /* Typography Scale Tokens */
  --bw-fs-display-lg: 2.5rem;   /* 40px */
  --bw-lh-display-lg: 3rem;     /* 48px */
  --bw-ls-display-lg: -0.025em;

  --bw-fs-display-md: 2.125rem; /* 34px */
  --bw-lh-display-md: 2.56rem;  /* 41px */
  --bw-ls-display-md: -0.020em;

  --bw-fs-title-1: 1.75rem;     /* 28px */
  --bw-lh-title-1: 2.125rem;    /* 34px */
  --bw-ls-title-1: -0.015em;

  --bw-fs-title-2: 1.375rem;    /* 22px */
  --bw-lh-title-2: 1.75rem;     /* 28px */
  --bw-ls-title-2: -0.010em;

  --bw-fs-headline: 1.0625rem;  /* 17px */
  --bw-lh-headline: 1.375rem;   /* 22px */
  --bw-ls-headline: -0.005em;

  --bw-fs-body: 1.0625rem;      /* 17px */
  --bw-lh-body: 1.375rem;       /* 22px */
  --bw-ls-body: 0em;

  --bw-fs-subhead: 0.9375rem;   /* 15px */
  --bw-lh-subhead: 1.25rem;     /* 20px */

  --bw-fs-footnote: 0.8125rem;  /* 13px */
  --bw-lh-footnote: 1.125rem;   /* 18px */

  --bw-fs-caption-1: 0.75rem;   /* 12px */
  --bw-lh-caption-1: 1rem;      /* 16px */

  /* Palette - Organic & Eco Emeralds */
  --bw-emerald-900: #064E3B;
  --bw-emerald-800: #065F46;
  --bw-emerald-700: #047857;
  --bw-emerald-600: #0D9488;
  --bw-emerald-500: #10B981;
  --bw-emerald-400: #34D399;
  --bw-emerald-100: #D1FAE5;
  --bw-emerald-50:  #ECFDF5;

  --bw-terracotta-500: #E05638;
  --bw-solar-amber-400: #F59E0B;
  --bw-sage-500: #84A98C;

  /* Status Colors */
  --bw-color-positive: #22C55E;
  --bw-color-warning:  #F59E0B;
  --bw-color-danger:   #EF4444;

  /* Default Light Surfaces */
  --bw-bg-primary: #F8FAF9;
  --bw-bg-secondary: #FFFFFF;
  --bw-bg-tertiary: #EAEFEF;
  --bw-text-primary: #0F172A;
  --bw-text-secondary: #475569;
  --bw-text-muted: #94A3B8;
  --bw-border-color: rgba(15, 23, 42, 0.08);

  /* Apple Glassmorphism Materials */
  --bw-material-bg: rgba(255, 255, 255, 0.75);
  --bw-material-blur: blur(20px) saturate(180%);
  --bw-material-border: 1px solid rgba(255, 255, 255, 0.5);

  /* Shadows & Elevation */
  --bw-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --bw-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --bw-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

  /* Corner Radii & Squircles */
  --bw-radius-sm: 8px;
  --bw-radius-md: 14px;
  --bw-radius-lg: 20px;
  --bw-radius-squircle: 24px;
  --bw-radius-full: 9999px;

  /* Transitions & Motion */
  --bw-transition-spring: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --bw-transition-fast: all 0.18s ease-out;

  /* Tap Target Envelope */
  --bw-min-tap-target: 44px;
}

/* Dark Mode Theme Overrides */
[data-theme="dark"] {
  --bw-bg-primary: #0B1311;
  --bw-bg-secondary: #14221F;
  --bw-bg-tertiary: #1E312D;
  --bw-text-primary: #F1F5F9;
  --bw-text-secondary: #94A3B8;
  --bw-text-muted: #64748B;
  --bw-border-color: rgba(241, 245, 249, 0.08);

  --bw-material-bg: rgba(20, 34, 31, 0.70);
  --bw-material-border: 1px solid rgba(255, 255, 255, 0.08);
  --bw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --bw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Forest Twilight Mode (Bioluminescent Organic Theme) */
[data-theme="twilight"] {
  --bw-bg-primary: #051A14;
  --bw-bg-secondary: #0A2920;
  --bw-bg-tertiary: #123B2F;
  --bw-text-primary: #D1FAE5;
  --bw-text-secondary: #6EE7B7;
  --bw-text-muted: #34D399;
  --bw-border-color: rgba(52, 211, 153, 0.15);
  --bw-emerald-600: #10B981;
  --bw-emerald-500: #34D399;

  --bw-material-bg: rgba(10, 41, 32, 0.75);
  --bw-material-border: 1px solid rgba(110, 231, 183, 0.2);
  --bw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --bw-shadow-md: 0 8px 24px rgba(5, 26, 20, 0.6);
}

/* Soft Warm Mode (Light Sensitive / Reduced Blue-Light) */
[data-theme="soft-warm"] {
  --bw-bg-primary: #F5EFE6;
  --bw-bg-secondary: #E8DFD8;
  --bw-bg-tertiary: #DDD0C8;
  --bw-text-primary: #3C2A21;
  --bw-text-secondary: #634832;
  --bw-text-muted: #8D7B68;
  --bw-border-color: rgba(60, 42, 33, 0.12);
  --bw-emerald-600: #6B8E23;
  --bw-emerald-500: #8FBC8F;

  --bw-material-bg: rgba(232, 223, 216, 0.85);
  --bw-material-border: 1px solid rgba(60, 42, 33, 0.15);
  --bw-shadow-sm: 0 2px 8px rgba(60, 42, 33, 0.06);
  --bw-shadow-md: 0 8px 24px rgba(60, 42, 33, 0.1);
}

/* Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--bw-font-sans);
  background-color: var(--bw-bg-primary);
  color: var(--bw-text-primary);
  line-height: var(--bw-lh-body);
  font-size: var(--bw-fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Utility Classes */
.bw-display-lg {
  font-family: var(--bw-font-serif);
  font-size: var(--bw-fs-display-lg);
  line-height: var(--bw-lh-display-lg);
  letter-spacing: var(--bw-ls-display-lg);
  font-weight: 800;
}

.bw-display-md {
  font-family: var(--bw-font-sans);
  font-size: var(--bw-fs-display-md);
  line-height: var(--bw-lh-display-md);
  letter-spacing: var(--bw-ls-display-md);
  font-weight: 700;
}

.bw-title-1 {
  font-size: var(--bw-fs-title-1);
  line-height: var(--bw-lh-title-1);
  letter-spacing: var(--bw-ls-title-1);
  font-weight: 600;
}

.bw-headline {
  font-size: var(--bw-fs-headline);
  line-height: var(--bw-lh-headline);
  font-weight: 600;
}

.bw-telemetry {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
}

/* Component Utilities */
.bw-card {
  background: var(--bw-bg-secondary);
  border: 1px solid var(--bw-border-color);
  border-radius: var(--bw-radius-squircle);
  padding: 24px;
  box-shadow: var(--bw-shadow-sm);
  transition: var(--bw-transition-spring);
}

.bw-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bw-shadow-md);
}

.bw-glass-panel {
  background: var(--bw-material-bg);
  backdrop-filter: var(--bw-material-blur);
  -webkit-backdrop-filter: var(--bw-material-blur);
  border: var(--bw-material-border);
  border-radius: var(--bw-radius-squircle);
  padding: 24px;
  box-shadow: var(--bw-shadow-md);
}

.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bw-min-tap-target);
  padding: 0 20px;
  font-family: var(--bw-font-sans);
  font-size: var(--bw-fs-subhead);
  font-weight: 600;
  border-radius: var(--bw-radius-full);
  border: none;
  cursor: pointer;
  transition: var(--bw-transition-spring);
  text-decoration: none;
  gap: 8px;
}

.bw-btn-primary {
  background: var(--bw-emerald-600);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.bw-btn-primary:hover {
  background: var(--bw-emerald-500);
  transform: scale(1.02);
}

.bw-btn-secondary {
  background: var(--bw-bg-tertiary);
  color: var(--bw-text-primary);
}

.bw-btn-secondary:hover {
  background: rgba(13, 148, 136, 0.15);
  color: var(--bw-emerald-600);
}

.bw-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--bw-radius-full);
  font-size: var(--bw-fs-caption-1);
  font-weight: 600;
  gap: 6px;
}

.bw-badge-positive {
  background: rgba(34, 197, 94, 0.15);
  color: var(--bw-color-positive);
}


.bw-prose {
  font-family: var(--bw-font-sans);
  font-size: var(--bw-fs-body);
  line-height: var(--bw-lh-body);
  color: var(--bw-text-primary);
  max-width: 68ch;
  text-wrap: balance;
  hyphens: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}