/* =========================================================================
   Nexus VPN — design tokens
   Single source of truth for colour, type, spacing, motion.
   Everything downstream references these; nothing hardcodes a hex.
   ========================================================================= */

@font-face {
  font-family: 'Fixel';
  src: url('../assets/fonts/FixelDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Fixel';
  src: url('../assets/fonts/FixelDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Fixel';
  src: url('../assets/fonts/FixelDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Fixel';
  src: url('../assets/fonts/FixelDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- ground ---- */
  --bg:            #030305;
  --bg-raised:     #08080c;
  --bg-sunken:     #000000;

  /* ---- glass surfaces (composited over the animated backdrop) ---- */
  --glass:         rgba(255, 255, 255, 0.045);
  --glass-strong:  rgba(255, 255, 255, 0.075);
  --glass-hi:      rgba(255, 255, 255, 0.11);
  --stroke:        rgba(255, 255, 255, 0.09);
  --stroke-hi:     rgba(255, 255, 255, 0.16);

  /* ---- ink ---- */
  --ink:           #F2F4F8;
  --ink-dim:       rgba(242, 244, 248, 0.62);
  --ink-faint:     rgba(242, 244, 248, 0.38);

  /* ---- chrome: the brand material ---- */
  --chrome-1:      #FFFFFF;
  --chrome-2:      #C9D2DE;
  --chrome-3:      #8A94A6;
  --chrome-4:      #E6EBF2;
  --chrome-grad:   linear-gradient(135deg,
                     var(--chrome-1) 0%,
                     var(--chrome-3) 22%,
                     var(--chrome-4) 44%,
                     var(--chrome-2) 62%,
                     var(--chrome-1) 82%,
                     var(--chrome-3) 100%);

  /* ---- signal accents (sparingly — chrome carries the identity) ---- */
  --cyan:          #7FD9FF;
  --violet:        #B39CFF;
  --mint:          #6EE7B7;
  --amber:         #FFC96B;
  --rose:          #FF8FA3;

  --ok:            var(--mint);
  --warn:          var(--amber);
  --danger:        var(--rose);

  --glow-cyan:     rgba(127, 217, 255, 0.35);
  --glow-violet:   rgba(179, 156, 255, 0.30);

  /* ---- type ---- */
  --font: 'Fixel', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
          'Segoe UI', Roboto, sans-serif;
  --fs-display: clamp(30px, 8.4vw, 40px);
  --fs-h1:      clamp(24px, 6.4vw, 30px);
  --fs-h2:      20px;
  --fs-h3:      17px;
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-xs:      11px;

  /* ---- geometry ---- */
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  --pad: 20px;

  /* ---- elevation ---- */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.7);

  /* ---- motion ----
     One spring for entrances, one snap for state flips, one long ease for
     ambient/background motion. Anything that moves picks from these three. */
  --ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
  --ease-snap:   cubic-bezier(0.32, 0.9, 0.28, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:     cubic-bezier(0.65, 0, 0.35, 1);

  --t-fast: 160ms;
  --t-med:  280ms;
  --t-slow: 520ms;

  /* ---- layout chrome ---- */
  --tabbar-h: 68px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Respect the user's motion preference: kill ambient loops and long
   transitions, keep instant state changes so the UI still reads. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}