/* ==========================================================================
   ASRON — Design Tokens
   Single source of truth for every color, size, and effect on the site.
   8px spacing system. Dark theme is the default; light theme overrides
   live at the bottom under [data-theme="light"].
   ========================================================================== */

:root {
  /* ----- Brand color ----- */
  --primary:        #3657FF;
  --primary-soft:   #5C77FF;
  --secondary:      #6A2BFF;
  --accent:         #00D4FF;
  --success:        #22C79A;
  --warning:        #FFB454;
  --danger:         #FF5470;

  /* ----- Surfaces ----- */
  --bg:             #050816;
  --surface:        #0D1326;
  --card:           #131C35;
  --card-hover:     #182344;
  --overlay:        rgba(5, 8, 22, 0.72);

  /* ----- Text ----- */
  --text:           #FFFFFF;
  --text-2:         #A0AEC0;
  --text-3:         #64748B;
  --text-on-brand:  #FFFFFF;

  /* ----- Lines & glass ----- */
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --glass:          rgba(19, 28, 53, 0.55);
  --glass-strong:   rgba(13, 19, 38, 0.82);
  --glass-blur:     18px;

  /* ----- Gradients ----- */
  --grad-brand:     linear-gradient(135deg, #3657FF 0%, #6A2BFF 100%);
  --grad-brand-rev: linear-gradient(315deg, #3657FF 0%, #6A2BFF 100%);
  --grad-aurora:    linear-gradient(120deg, #3657FF, #6A2BFF 45%, #00D4FF 90%);
  --grad-text:      linear-gradient(92deg, #FFFFFF 0%, #B9C6FF 55%, #7E9BFF 100%);
  --grad-line:      linear-gradient(90deg, transparent, rgba(122, 148, 255, 0.55), transparent);

  /* ----- Typography ----- */
  --font-display:   "Space Grotesk", "Inter", sans-serif;
  --font-body:      "Manrope", "Inter", sans-serif;

  --fs-hero:        clamp(2.75rem, 6.2vw, 5rem);      /* 44 → 80 */
  --fs-h1:          clamp(2.5rem, 5vw, 4rem);         /* 40 → 64 */
  --fs-h2:          clamp(1.875rem, 3.4vw, 2.75rem);  /* 30 → 44 */
  --fs-h3:          clamp(1.375rem, 2vw, 1.625rem);   /* 22 → 26 */
  --fs-h4:          1.125rem;                         /* 18 */
  --fs-lead:        clamp(1.0625rem, 1.4vw, 1.25rem); /* 17 → 20 */
  --fs-body:        1rem;                             /* 16 */
  --fs-small:       0.875rem;                         /* 14 */
  --fs-tiny:        0.75rem;                          /* 12 */

  --lh-tight:       1.08;
  --lh-heading:     1.16;
  --lh-body:        1.7;

  --ls-tight:       -0.03em;
  --ls-wide:        0.14em;

  /* ----- Spacing (8px system) ----- */
  --s-1:  0.5rem;   /*  8 */
  --s-2:  1rem;     /* 16 */
  --s-3:  1.5rem;   /* 24 */
  --s-4:  2rem;     /* 32 */
  --s-5:  2.5rem;   /* 40 */
  --s-6:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-10: 5rem;     /* 80 */
  --s-12: 6rem;     /* 96 */
  --s-15: 7.5rem;   /* 120 */
  --s-18: 9rem;     /* 144 */

  --section-pad:    clamp(4.5rem, 9vw, 8.5rem);
  --container:      75rem;    /* 1200px */
  --container-wide: 87.5rem;  /* 1400px */
  --gutter:         clamp(1.25rem, 4vw, 2.5rem);

  /* ----- Radii ----- */
  --r-sm:   0.5rem;
  --r-md:   0.875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-full: 999px;

  /* ----- Shadow & glow ----- */
  --shadow-sm:      0 2px 8px rgba(2, 4, 14, 0.35);
  --shadow-md:      0 10px 34px rgba(2, 4, 14, 0.45);
  --shadow-lg:      0 24px 70px rgba(2, 4, 14, 0.55);
  --glow-primary:   0 0 44px rgba(54, 87, 255, 0.35);
  --glow-accent:    0 0 44px rgba(0, 212, 255, 0.25);

  /* ----- Motion ----- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:         0.2s var(--ease-out);
  --t-med:          0.45s var(--ease-out);
  --t-slow:         0.8s var(--ease-out);

  /* ----- Z-index scale ----- */
  --z-nav:      100;
  --z-dropdown: 110;
  --z-popup:    200;
  --z-cursor:   300;
  --z-loader:   400;

  /* ----- Header ----- */
  --header-h:   4.5rem; /* 72px */

  color-scheme: dark;
}

/* ==========================================================================
   Light theme — toggled via the theme switch in the header
   ========================================================================== */
[data-theme="light"] {
  --bg:             #F6F8FE;
  --surface:        #FFFFFF;
  --card:           #FFFFFF;
  --card-hover:     #F1F4FF;
  --overlay:        rgba(15, 23, 42, 0.5);

  --text:           #0B1226;
  --text-2:         #47536B;
  --text-3:         #7C8AA5;

  --border:         rgba(11, 18, 38, 0.1);
  --border-strong:  rgba(11, 18, 38, 0.2);
  --glass:          rgba(255, 255, 255, 0.72);
  --glass-strong:   rgba(255, 255, 255, 0.9);

  --grad-text:      linear-gradient(92deg, #0B1226 0%, #26379B 60%, #3657FF 100%);
  --grad-line:      linear-gradient(90deg, transparent, rgba(54, 87, 255, 0.4), transparent);

  --shadow-sm:      0 2px 8px rgba(23, 32, 70, 0.08);
  --shadow-md:      0 10px 34px rgba(23, 32, 70, 0.1);
  --shadow-lg:      0 24px 70px rgba(23, 32, 70, 0.14);
  --glow-primary:   0 0 44px rgba(54, 87, 255, 0.18);
  --glow-accent:    0 0 44px rgba(0, 212, 255, 0.14);

  color-scheme: light;
}