/* ═══════════════════════════════════════════════════════════════
   СЕПТИК — CSS Variables (Design Tokens)
   Палитра: Engineering / Eco-Tech Dark Mode
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --clr-bg:          #0A0E1A;
  --clr-bg-2:        #111827;
  --clr-bg-card:     #161D2E;
  --clr-bg-glass:    rgba(255,255,255,0.04);
  --clr-border:      rgba(255,255,255,0.08);
  --clr-border-hover:rgba(37,99,235,0.4);

  /* Brand blue */
  --clr-blue:        #2563EB;
  --clr-blue-light:  #3B82F6;
  --clr-blue-glow:   rgba(37,99,235,0.25);

  /* Accent orange (CTA) */
  --clr-orange:      #F97316;
  --clr-orange-hover:#EA6706;
  --clr-orange-glow: rgba(249,115,22,0.3);

  /* Green (trust) */
  --clr-green:       #22C55E;
  --clr-green-dim:   #16A34A;

  /* Text */
  --clr-text:        #F1F5F9;
  --clr-text-muted:  #94A3B8;
  --clr-text-dim:    #64748B;
  --clr-white:       #FFFFFF;

  /* Header / Overlays */
  --clr-header-bg:        rgba(10,14,26,0.85);
  --clr-header-scrolled:  rgba(10,14,26,0.97);
  --clr-mobile-menu-bg:   rgba(10,14,26,0.98);
  --clr-mobile-sticky-bg: rgba(10,14,26,0.95);
  --clr-btn-text:         #FFFFFF;

  /* ── Typography ── */
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */
  --fs-5xl:  3rem;      /* 48px */
  --fs-6xl:  3.75rem;   /* 60px */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Layout ── */
  --container:  1200px;
  --container-sm: 860px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full:9999px;

  /* ── Shadows & Glows ── */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-btn:  0 4px 16px rgba(37,99,235,0.35);
  --shadow-orange:0 4px 20px rgba(249,115,22,0.4);
  --glow-blue:   0 0 60px rgba(37,99,235,0.18);
  --glow-orange: 0 0 80px rgba(249,115,22,0.12);

  /* ── Transitions ── */
  --ease-spring: cubic-bezier(0.16,1,0.3,1);
  --ease-out:    cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    350ms;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Colors ── */
  --clr-bg:          #F8FAFC;
  --clr-bg-2:        #FFFFFF;
  --clr-bg-card:     #FFFFFF;
  --clr-bg-glass:    rgba(255, 255, 255, 0.88);
  --clr-border:      rgba(15, 23, 42, 0.09);
  --clr-border-hover:rgba(37, 99, 235, 0.45);

  /* Header / Overlays */
  --clr-header-bg:        rgba(248, 250, 252, 0.88);
  --clr-header-scrolled:  rgba(255, 255, 255, 0.97);
  --clr-mobile-menu-bg:   rgba(255, 255, 255, 0.98);
  --clr-mobile-sticky-bg: rgba(255, 255, 255, 0.96);

  /* Brand blue */
  --clr-blue:        #2563EB;
  --clr-blue-light:  #1D4ED8;
  --clr-blue-glow:   rgba(37, 99, 235, 0.12);

  /* Accent orange */
  --clr-orange:      #EA580C;
  --clr-orange-hover:#C2410C;
  --clr-orange-glow: rgba(234, 88, 12, 0.2);

  /* Green */
  --clr-green:       #16A34A;
  --clr-green-dim:   #15803D;

  /* Text */
  --clr-text:        #1E293B;
  --clr-text-muted:  #475569;
  --clr-text-dim:    #64748B;
  --clr-white:       #0F172A; /* Slate 900 for headings & primary high-contrast titles */
  --clr-btn-text:    #FFFFFF;

  /* Shadows & Glows */
  --shadow-card:   0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-btn:    0 4px 16px rgba(37, 99, 235, 0.25);
  --shadow-orange: 0 4px 20px rgba(234, 88, 12, 0.25);
  --glow-blue:     0 0 60px rgba(37, 99, 235, 0.06);
  --glow-orange:   0 0 80px rgba(234, 88, 12, 0.05);
}