/* ============================================================
   PARADIGM BIO METAL — Design Tokens
   Second Pass: Industrial Premium Palette
   ============================================================ */

:root {
  /* ── Color Palette ───────────────────────────────────────── */
  
  /* Primary Blues — Industrial Core */
  --clr-navy:          #071224;
  --clr-navy-deep:     #040B17;
  --clr-blue-900:      #0B2240;
  --clr-blue-800:      #0C3D8F;
  --clr-blue-700:      #1258B0;
  --clr-blue-600:      #1668CC;
  --clr-blue-500:      #1E88E5;
  --clr-blue-400:      #3FA0F0;
  --clr-blue-300:      #6BB8F5;
  --clr-blue-200:      #90CAF9;
  --clr-blue-glow:     rgba(30, 136, 229, 0.40);
  --clr-blue-glow-soft:rgba(30, 136, 229, 0.12);

  /* Metallic Steel Grays */
  --clr-steel-100:     #E8ECF1;
  --clr-steel-200:     #C5CCD6;
  --clr-steel-300:     #9BA7B6;
  --clr-steel-400:     #6E7D8F;
  --clr-steel-500:     #4A5568;
  --clr-steel-600:     #2D3748;
  --clr-steel-700:     #1A2332;

  /* Background / Surface — Deeper, more industrial */
  --clr-bg-primary:    #060A10;
  --clr-bg-secondary:  #0A0F18;
  --clr-bg-tertiary:   #0E1420;
  --clr-surface:       #141C2B;
  --clr-surface-light: #1E2A3E;
  --clr-surface-hover: #263450;

  /* Text */
  --clr-text-primary:  #EFF3F8;
  --clr-text-secondary:#8D9DB5;
  --clr-text-muted:    #5A6B82;
  --clr-text-accent:   #3FA0F0;

  /* Accent — CTA / Emphasis (warmer industrial orange) */
  --clr-accent:        #E06B0A;
  --clr-accent-light:  #F28C28;
  --clr-accent-glow:   rgba(224, 107, 10, 0.30);
  --clr-accent-gold:   #F5A623;

  /* Borders */
  --clr-border:        rgba(130, 155, 190, 0.08);
  --clr-border-light:  rgba(130, 155, 190, 0.15);
  --clr-border-blue:   rgba(30, 136, 229, 0.25);

  /* Status */
  --clr-success:       #22C55E;
  --clr-white:         #FFFFFF;

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading:      'Montserrat', sans-serif;
  --font-body:         'Inter', sans-serif;

  /* Scale (modular, major third ~1.25) */
  --fs-xs:             0.75rem;    /* 12px */
  --fs-sm:             0.875rem;   /* 14px */
  --fs-base:           1rem;       /* 16px */
  --fs-md:             1.125rem;   /* 18px */
  --fs-lg:             1.25rem;    /* 20px */
  --fs-xl:             1.5rem;     /* 24px */
  --fs-2xl:            1.875rem;   /* 30px */
  --fs-3xl:            2.25rem;    /* 36px */
  --fs-4xl:            3rem;       /* 48px */
  --fs-5xl:            3.75rem;    /* 60px */
  --fs-6xl:            4.5rem;     /* 72px */

  /* Weights */
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;
  --fw-black:          900;

  /* Line heights */
  --lh-tight:          1.15;
  --lh-heading:        1.2;
  --lh-body:           1.65;
  --lh-relaxed:        1.8;

  /* Letter spacing */
  --ls-tight:          -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.05em;
  --ls-wider:          0.12em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs:          0.25rem;
  --space-sm:          0.5rem;
  --space-md:          1rem;
  --space-lg:          1.5rem;
  --space-xl:          2rem;
  --space-2xl:         3rem;
  --space-3xl:         4rem;
  --space-4xl:         6rem;
  --space-5xl:         8rem;
  --space-6xl:         10rem;

  /* Section padding */
  --section-py:        clamp(4rem, 8vw, 8rem);
  --section-px:        clamp(1rem, 4vw, 2rem);

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:         1280px;
  --max-width-narrow:  960px;
  --max-width-wide:    1440px;
  --navbar-height:     80px;

  /* ── Borders & Radius ────────────────────────────────────── */
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --radius-xl:         28px;
  --radius-full:       9999px;

  /* ── Shadows — deeper, more dramatic ─────────────────────── */
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:         0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:         0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:         0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-blue:       0 4px 30px rgba(30, 136, 229, 0.20);
  --shadow-blue-strong:0 8px 40px rgba(30, 136, 229, 0.30);
  --shadow-accent:     0 4px 24px rgba(224, 107, 10, 0.25);
  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.3),
                       0 0 1px rgba(130, 155, 190, 0.08);

  /* ── Glass / Blur ────────────────────────────────────────── */
  --glass-bg:          rgba(14, 20, 35, 0.70);
  --glass-bg-light:    rgba(22, 32, 52, 0.55);
  --glass-blur:        20px;
  --glass-border:      rgba(130, 155, 190, 0.07);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:     150ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   800ms;
  --duration-reveal:   1000ms;

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-base:            1;
  --z-dropdown:        100;
  --z-sticky:          200;
  --z-navbar:          500;
  --z-overlay:         600;
  --z-modal:           700;
  --z-whatsapp:        800;
  --z-toast:           900;
}