/* ========================================================
   Glass 2.0 — Design System
   Tokens + animated gradient bg + reusable glass components
   ======================================================== */

/* ============ TOKENS — Dark (default) ============ */
:root,
:root[data-theme="dark"]{
  /* Background gradient stops */
  --g-bg-1: #0a0e27;
  --g-bg-2: #1e1b4b;
  --g-bg-3: #1e3a8a;

  /* Glass surfaces */
  --g-surface:        rgba(255,255,255,0.05);
  --g-surface-hover:  rgba(255,255,255,0.09);
  --g-surface-strong: rgba(255,255,255,0.10);
  --g-border:         rgba(255,255,255,0.10);
  --g-border-hover:   rgba(255,255,255,0.18);

  /* Text */
  --g-text-1: #f0f4ff;
  --g-text-2: #cbd5e1;
  --g-text-3: #94a3b8;
  --g-text-4: #64748b;

  /* Accent (cyan) */
  --g-accent:       #06b6d4;
  --g-accent-2:     #0891b2;
  --g-accent-soft:  rgba(6,182,212,0.14);
  --g-accent-glow:  0 0 24px rgba(6,182,212,0.35);
  --g-violet:       #8b5cf6;

  /* Status */
  --g-ok:  #34d399; --g-ok-bg:  rgba(52,211,153,0.13);
  --g-warn:#fbbf24; --g-warn-bg:rgba(251,191,36,0.13);
  --g-bad: #f87171; --g-bad-bg: rgba(248,113,113,0.13);

  /* Shapes */
  --g-radius-sm: 8px;
  --g-radius:    12px;
  --g-radius-md: 14px;
  --g-radius-lg: 20px;
  --g-blur:      10px;

  /* ===== Override shell tokens for consistency ===== */
  --wm-bg:        transparent;
  --wm-surface:   var(--g-surface);
  --wm-surface2:  var(--g-surface-hover);
  --wm-border:    var(--g-border);
  --wm-text:      var(--g-text-1);
  --wm-muted:     var(--g-text-3);
  --wm-accent:    var(--g-accent);
  --wm-accent2:   var(--g-violet);
  --wm-danger:    var(--g-bad);
  --wm-radius:    var(--g-radius-md);
  --wm-radius2:   var(--g-radius);
  --wm-blur:      blur(var(--g-blur));
  --wm-shadow:    0 8px 32px rgba(6,182,212,0.12);
}

/* ============ TOKENS — Light ============ */
:root[data-theme="light"]{
  --g-bg-1: #eef2ff;
  --g-bg-2: #f0f9ff;
  --g-bg-3: #ecfeff;

  --g-surface:        rgba(255,255,255,0.55);
  --g-surface-hover:  rgba(255,255,255,0.85);
  --g-surface-strong: rgba(255,255,255,0.95);
  --g-border:         rgba(15,23,42,0.08);
  --g-border-hover:   rgba(15,23,42,0.18);

  --g-text-1: #0f172a;
  --g-text-2: #334155;
  --g-text-3: #64748b;
  --g-text-4: #94a3b8;

  --g-accent:      #0891b2;
  --g-accent-2:    #06b6d4;
  --g-accent-soft: rgba(8,145,178,0.10);
  --g-accent-glow: 0 0 24px rgba(8,145,178,0.25);
  --g-violet:      #7c3aed;

  --g-ok:  #16a34a; --g-ok-bg:  rgba(22,163,74,0.10);
  --g-warn:#d97706; --g-warn-bg:rgba(217,119,6,0.10);
  --g-bad: #dc2626; --g-bad-bg: rgba(220,38,38,0.10);

  --wm-bg:        transparent;
  --wm-text:      var(--g-text-1);
  --wm-muted:     var(--g-text-3);
  --wm-shadow:    0 4px 24px rgba(8,145,178,0.12);
}

/* ============ BASE / BODY ============ */
html, body{
  background: var(--g-bg-1);
  color: var(--g-text-1);
  min-height: 100vh;
}

body.g-body{
  position: relative;
  background:
    radial-gradient(1200px 800px at 15% -10%, color-mix(in srgb, var(--g-accent) 22%, transparent) 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 110%, color-mix(in srgb, var(--g-violet) 22%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--g-bg-1) 0%, var(--g-bg-2) 50%, var(--g-bg-3) 100%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", "Inter", "Tahoma", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* noise overlay — kills gradient banding without sacrificing performance */
body.g-body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body.g-body::before{ opacity: 0.04; }

body.g-body > *{ position: relative; z-index: 1; }

/* nice scrollbars */
*{ scrollbar-width: thin; scrollbar-color: var(--g-border-hover) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--g-border); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--g-border-hover); background-clip: padding-box; }

/* selection */
::selection{ background: color-mix(in srgb, var(--g-accent) 35%, transparent); color: var(--g-text-1); }

/* ============ REUSABLE COMPONENTS ============ */

/* CARD */
.g-card{
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  transition: border-color .15s, background .15s, transform .04s;
  contain: layout style;
}
.g-card--interactive{ cursor: pointer; }
.g-card--interactive:hover{
  border-color: var(--g-border-hover);
  background: var(--g-surface-hover);
}
.g-card--interactive:active{ transform: translateY(1px); }

/* BUTTON */
.g-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  color: var(--g-text-1);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  transition: background .14s, border-color .14s, transform .04s, box-shadow .14s;
}
.g-btn:hover{
  background: var(--g-surface-hover);
  border-color: var(--g-border-hover);
}
.g-btn:active{ transform: scale(.98); }
.g-btn:disabled{ opacity: .4; cursor: not-allowed; }

.g-btn--primary{
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--g-accent-glow);
}
.g-btn--primary:hover{
  background: linear-gradient(135deg, var(--g-accent-2), var(--g-accent));
  border-color: transparent;
  box-shadow: 0 0 32px rgba(6,182,212,0.5);
}
.g-btn--danger{
  background: color-mix(in srgb, var(--g-bad) 18%, transparent);
  border-color: color-mix(in srgb, var(--g-bad) 35%, transparent);
  color: var(--g-bad);
}
.g-btn--danger:hover{
  background: color-mix(in srgb, var(--g-bad) 26%, transparent);
  border-color: color-mix(in srgb, var(--g-bad) 50%, transparent);
}

/* INPUT */
.g-input,
.g-select{
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  color: var(--g-text-1);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  transition: border-color .12s, box-shadow .12s, background .12s;
  width: 100%;
}
.g-input::placeholder{ color: var(--g-text-3); }
.g-input:focus,
.g-select:focus{
  border-color: var(--g-accent);
  background: var(--g-surface-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 25%, transparent);
}
.g-select{
  appearance: none;
  -webkit-appearance: none;
  padding-inline-start: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  cursor: pointer;
}
.g-select option{ background: var(--g-bg-2); color: var(--g-text-1); }
:root[data-theme="light"] .g-select option{ background: #fff; color: var(--g-text-1); }

/* PILL / BADGE */
.g-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.g-pill b{ color: var(--g-text-1); font-weight: 800; }
.g-pill--accent{ background: var(--g-accent-soft); border-color: transparent; color: var(--g-accent); }
.g-pill--accent b{ color: var(--g-accent); }
.g-pill--ok    { background: var(--g-ok-bg);   border-color: transparent; color: var(--g-ok); }
.g-pill--ok b  { color: var(--g-ok); }
.g-pill--warn  { background: var(--g-warn-bg); border-color: transparent; color: var(--g-warn); }
.g-pill--warn b{ color: var(--g-warn); }
.g-pill--bad   { background: var(--g-bad-bg);  border-color: transparent; color: var(--g-bad); }
.g-pill--bad b { color: var(--g-bad); }

/* TOGGLE switch (theme btn) */
.g-theme-toggle{
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 1100;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text-1);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.g-theme-toggle:hover{
  background: var(--g-surface-hover);
  border-color: var(--g-accent);
  box-shadow: var(--g-accent-glow);
  transform: scale(1.06);
}
.g-theme-toggle svg{ width: 18px; height: 18px; }
.g-theme-toggle .icon-sun{ display: none; }
.g-theme-toggle .icon-moon{ display: block; }
:root[data-theme="light"] .g-theme-toggle .icon-sun{ display: block; }
:root[data-theme="light"] .g-theme-toggle .icon-moon{ display: none; }

/* HEADING & DIVIDER helpers */
.g-h{
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g-text-1);
}
.g-divider{
  height: 1px;
  background: var(--g-border);
  margin: 12px 0;
}

/* ===== Glow utility ===== */
.g-glow{ box-shadow: var(--g-accent-glow); }

/* ===== Animations ===== */
@keyframes g-fade-in{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }
.g-anim-in{ animation: g-fade-in .2s ease-out both; }

@keyframes g-spin{ to{ transform: rotate(360deg); } }
.g-spinner{
  width: 28px; height: 28px;
  border: 2.5px solid var(--g-border);
  border-top-color: var(--g-accent);
  border-radius: 50%;
  animation: g-spin .7s linear infinite;
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  *, ::before, ::after{ animation: none !important; transition: none !important; }
}