/* =========================================================
   DART DESIGN — shared design tokens
   Base = warm-charcoal "forge ash" dark theme.
   Each portal overrides --accent / --accent-2 to signal
   which system you're in (site = amber, admin = teal,
   super admin = violet) — like heat-colour coding on metal.
   ========================================================= */

:root{
  /* base surfaces */
  --bg:            #0b0f17;
  --bg-elevated:   #0b0f17;
  --bg-card:       #131a29;
  --bg-card-hover: #192236;
  --border:        rgba(255, 255, 255, 0.1);
  --border-soft:   rgba(255, 255, 255, 0.06);

  /* text */
  --text-primary:  #F4EFE6;
  --text-secondary:#B4A996;
  --text-muted:    #786C58;

  /* default accent (overridden per portal) */
  --accent:        #FF5A1F;
  --accent-2:      #FFB13D;
  --accent-soft:   rgba(255,90,31,.12);

  /* status */
  --ok:    #3ECF8E;
  --warn:  #F5B94D;
  --danger:#FF5C6C;
  --info:  #4DB8F5;

  /* type */
  --f-display: 'Sora', 'Inter', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* scale */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-lift: 0 20px 50px -20px rgba(0,0,0,.6);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:#0F0E0C; }

/* the "molten seam" — signature divider used across all portals */
.seam{
  height:2px;
  width:100%;
  border:none;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-2) 50%, var(--accent) 80%, transparent);
  background-size:200% 100%;
  animation:seam-flow 6s linear infinite;
  opacity:.7;
}
@keyframes seam-flow{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .seam{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:99px;
  border:1px solid var(--border); color:var(--text-secondary);
  background:var(--bg-card);
}
.badge.ok{ color:var(--ok); border-color:rgba(62,207,142,.3); background:rgba(62,207,142,.08); }
.badge.warn{ color:var(--warn); border-color:rgba(245,185,77,.3); background:rgba(245,185,77,.08); }
.badge.danger{ color:var(--danger); border-color:rgba(255,92,108,.3); background:rgba(255,92,108,.08); }
.badge.info{ color:var(--info); border-color:rgba(77,184,245,.3); background:rgba(77,184,245,.08); }
.badge.accent{ color:var(--accent-2); border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:var(--accent-soft); }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:99px; font-weight:600; font-size:14px;
  border:1px solid transparent; transition:transform .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#100D09; }
.btn-primary:hover{ opacity:.92; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text-primary); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}

/* Global Hidden Scrollbars (Keeps smooth scrolling functionality) */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}