/* ═══════════════════════════════════════════════════════
   UltraSinergia — Official Brand Design Tokens
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Official Brand Colors ── */
  --bg-deep:        #040c16;
  --bg-main:        #081a2a;
  --bg-surface:     #0d2338;
  --bg-card:        rgba(13, 35, 56, 0.70);
  --bg-card-solid:  #102c47;
  --bg-glass:       rgba(255, 255, 255, 0.04);

  /* Primary Brand Gradient Accents */
  --accent-cyan:        #6fe0d0;
  --accent-cyan-light:  #95f0e3;
  --accent-blue:        #0088e0;
  --accent-blue-deep:   #0066b3;
  --accent-silver:      #dbe3ec;
  --accent-white:       #ffffff;

  --accent-cyan-dim:    rgba(111, 224, 208, 0.14);
  --accent-blue-dim:    rgba(0, 136, 224, 0.15);
  --accent-silver-dim:  rgba(219, 227, 236, 0.10);

  /* Typography Colors */
  --text-primary:   #ffffff;
  --text-secondary: #9bb5cc;
  --text-tertiary:  #607c96;
  --text-accent:    var(--accent-cyan);

  /* Borders */
  --border-subtle:  rgba(111, 224, 208, 0.10);
  --border-light:   rgba(255, 255, 255, 0.12);
  --border-glow:    rgba(111, 224, 208, 0.35);

  /* ── Gradients ── */
  --gradient-hero:  radial-gradient(ellipse at 15% 45%, rgba(111,224,208,0.14) 0%, transparent 45%),
                    radial-gradient(ellipse at 85% 25%, rgba(0,136,224,0.16) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 85%, rgba(0,102,179,0.10) 0%, transparent 50%),
                    var(--bg-main);
  --gradient-brand:  linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  --gradient-text:   linear-gradient(135deg, #ffffff 10%, var(--accent-cyan) 60%, var(--accent-blue) 100%);
  --gradient-text-alt: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  --gradient-card:   linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(13,35,56,0.5) 100%);
  --gradient-footer: linear-gradient(180deg, var(--bg-main) 0%, #040c16 100%);

  /* ── Typography ── */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5.2vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 4vw, 3rem);
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.75rem;
  --fs-label:   0.6875rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:    1.1;
  --lh-heading:  1.15;
  --lh-body:     1.7;

  --ls-tight:   -0.03em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-ultra:    0.18em;

  /* ── 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;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Borders & Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 50%;

  /* ── Shadows & Glows ── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.6);
  --shadow-glow-cyan:  0 0 30px rgba(111,224,208,0.25), 0 0 60px rgba(111,224,208,0.08);
  --shadow-glow-blue:  0 0 30px rgba(0,136,224,0.30), 0 0 60px rgba(0,136,224,0.10);
  --shadow-glow-mixed: 0 0 30px rgba(111,224,208,0.20), 0 0 60px rgba(0,136,224,0.12);

  /* ── Transitions ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-padding: clamp(1.5rem, 5vw, 4rem);
  --header-height: 80px;

  /* ── Z-Index ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-header:   1000;
  --z-overlay:  2000;
  --z-modal:    3000;
  --z-loader:   9999;
}