/* ============================================
   JSR Balcony Safety Nets — Design Tokens
   Exact Reference Match
   ============================================ */

:root {
  /* ── PRIMARY COLORS (Exact Reference) ── */
  --color-primary: #155a7e;
  --color-primary-dark: #0e4562;
  --color-primary-light: #1a6d99;
  --color-accent: #50aa54;
  --color-accent-dark: #3d8a40;
  --color-accent-light: #6bc96f;
  --color-highlight: #8cdbd7;
  --color-highlight-light: #b5ebe8;
  --color-yellow: #eeee22;
  --color-gold: #f1c40f;
  --color-red: #E54F3E;

  /* Neutrals */
  --color-white: #ffffff;
  --color-off-white: #f5f8fa;
  --color-light-gray: #e8edf2;
  --color-gray-100: #dde3ea;
  --color-gray-200: #c5ced8;
  --color-gray-300: #94a3b8;
  --color-gray-400: #64748b;
  --color-gray-500: #475569;
  --color-dark: #1e293b;
  --color-darker: #0f172a;
  --color-darkest: #020617;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #155a7e 0%, #1a7aa8 100%);
  --gradient-accent: linear-gradient(135deg, #50aa54 0%, #6bc96f 100%);
  --gradient-bar: linear-gradient(90deg, #155a7e 0%, #50aa54 50%, #8cdbd7 100%);
  --gradient-hero-overlay: linear-gradient(90deg, rgba(14,69,98,0.85) 0%, rgba(21,90,126,0.6) 50%, rgba(0,0,0,0.2) 100%);

  /* Typography - Reference uses PT Sans / Mulish */
  --font-heading: 'Poppins', 'PT Sans', sans-serif;
  --font-body: 'Mulish', 'Inter', sans-serif;

  /* Sizes */
  --fs-display: clamp(2rem, 5vw, 3.2rem);
  --fs-h1: clamp(1.75rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 2.5vw, 1.5rem);
  --fs-h4: 1.15rem;
  --fs-body-lg: 1.05rem;
  --fs-body: 0.95rem;
  --fs-small: 0.85rem;
  --fs-xs: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

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

  /* Border & Radius - Reference uses 2px solid #155a7e */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 50px;
  --border-card: 2px solid var(--color-primary);

  /* Shadows - Reference uses small_depth */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 25px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 10px rgba(21,90,126,0.1);
  --shadow-card-hover: 0 8px 30px rgba(21,90,126,0.18);

  /* Layout */
  --container-max: 1200px;
  --container-padding: clamp(15px, 3vw, 30px);
  --section-padding: clamp(2.5rem, 6vw, 4rem);
  --header-secondary-height: 40px;
  --header-main-height: 80px;
  --header-total-height: calc(var(--header-secondary-height) + var(--header-main-height));

  /* Z-index */
  --z-sticky: 100;
  --z-header: 999;
  --z-fixed: 1000;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-float: 1100;

  /* Transitions */
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.6s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}