/* ============================================================
   Lasergame Schweiz — brand tokens for the Registrierungstool.
   Laser-arena identity: deep arena dark, electric cyan +
   neon magenta team colors, sporty Rajdhani / Barlow type, glow.
   Variable names kept compatible with the component styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Barlow:wght@300;400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

:root{
  /* fonts */
  --f-sans:  'Barlow', system-ui, -apple-system, sans-serif;
  --f-head:  'Rajdhani', 'Barlow Semi Condensed', sans-serif;
  --f-cond:  'Barlow Semi Condensed', sans-serif;
  --f-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* arena surfaces */
  --bg:      #0a0a0b;
  --bg-2:    #101011;
  --surf:    #161618;
  --surf-2:  #1d1d20;
  --surf-3:  #22222640;

  /* brand colors */
  --cyan:        #e2231c;   /* primary laser / blue team */
  --cyan-bright: #ff4d44;
  --cyan-deep:   #3a0a0a;
  --magenta:     #c2ccd6;   /* red/pink team / energy */
  --magenta-br:  #dde3ea;
  --lime:        #5ce06a;   /* go / success */
  --amber:       #ffb13d;   /* warn */

  /* mapped semantic names used across the components */
  --favorit: var(--cyan);   /* primary accent (was orange in Orbit) */
  --blue:    var(--cyan);
  --green:   var(--lime);
  --red:     #ff3b51;

  /* cool-white foreground ladder */
  --100: #f3f3f5;
  --80:  rgba(240,240,242,.80);
  --60:  rgba(240,240,242,.60);
  --40:  rgba(240,240,242,.42);
  --20:  rgba(240,240,242,.20);
  --10:  rgba(240,240,242,.10);
  --5:   rgba(240,240,242,.055);
  --4:   rgba(240,240,242,.04);
  --2:   rgba(240,240,242,.022);

  /* "inverse" = the dark base (so check-on-light reads dark) */
  --inv-100: #0a0a0b;
  --inv-80:  rgba(10,10,11,.8);
  --inv-60:  rgba(10,10,11,.6);
  --inv-40:  rgba(10,10,11,.4);
  --inv-20:  rgba(10,10,11,.2);
  --inv-10:  rgba(10,10,11,.1);

  /* radius — slightly tighter, sportier than Orbit pills */
  --r-sm:4px; --r-md:9px; --r-lg:16px; --r-xl:20px; --r-pill:22px; --r-cap:999px;

  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* motion */
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:380ms;
  --ease-out: cubic-bezier(0.16,1,0.3,1);

  /* glow */
  --glow-cyan: 0 0 0 1px rgba(226,35,28,.5), 0 0 18px rgba(226,35,28,.35);
  --glow-mag:  0 0 0 1px rgba(150,158,170,.5), 0 0 18px rgba(150,158,170,.32);
  --glow: 0 0 0 1px rgba(226,35,28,.45), 0 0 14px rgba(226,35,28,.3);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--f-sans); font-weight:400;
  color:var(--100);
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
}
#root{ min-height:100vh; }
button{ font-family:inherit; color:inherit; }
.mono{ font-family:var(--f-mono); letter-spacing:0; }
::selection{ background:var(--cyan); color:#0a0a0b; }

/* arena backdrop: deep gradient + faint laser grid + team glows */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(80% 55% at 82% -8%, rgba(226,35,28,.10), transparent 60%),
    radial-gradient(70% 50% at 0% 108%, rgba(150,158,170,.09), transparent 60%),
    linear-gradient(var(--bg-2), var(--bg));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}