@import url('./layout.css');
@import url('./components.css');
@import url('./forms.css');
@import url('./tables.css');
@import url('./utilities.css');
@import url('./admin.css');
@import url('./organisers.css');
@import url('./events.css');
@import url('./profile.css');

:root{
  --bg0:#070A10;
  --bg1:#0B1020;
  --panel:#0E1424cc;      
  --panelSolid:#0E1424;
  --stroke:#27304a;
  --stroke2:#1b2236;
  --text:#EAF0FF;
  --muted:#A7B0C6;
  --muted2:#7E88A3;

  --accent:#E11D2E;       
  --accent2:#FF3B4A;
  --good:#2EF2A7;
  --bad:#FF4D5E;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 16px;
  --radius2: 12px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
  font-family: var(--sans);
  color: var(--text);
  overflow-x:hidden;
}

html, body.dashboard {
    margin: 0;
    font-family: var(--sans);
    background:
      radial-gradient(900px 600px at 15% 20%, rgba(225,29,46,.18), transparent 60%),
      radial-gradient(800px 550px at 80% 25%, rgba(93,143,255,.12), transparent 55%),
      radial-gradient(700px 600px at 55% 90%, rgba(46,242,167,.08), transparent 60%),
      linear-gradient(135deg, var(--bg0), var(--bg1));
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: var(--text);
    position: relative;
}

body.dashboard{ background-color: var(--bg0); }

body.dashboard::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.12;
  pointer-events:none;
  mask-image: radial-gradient(70% 60% at 50% 35%, black 45%, transparent 100%);
  z-index:0;
}