/* ============================================================
   LumenFlow Design System — Single Source of Truth
   Theme: Iridescent Acid Modern  (#AEFF00 → #00E5FF → #FF2079)
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Primitive palette ---------- */
:root {
  /* Acid lime */
  --_lime-bright: #AEFF00;
  --_lime-mid:    #8FD600;
  --_lime-deep:   #6BA000;

  /* Electric cyan */
  --_cyan-bright: #00E5FF;
  --_cyan-mid:    #00B8CC;
  --_cyan-deep:   #008A99;

  /* Hot pink */
  --_pink-bright: #FF2079;
  --_pink-mid:    #CC1A61;
  --_pink-deep:   #991248;

  /* Acid yellow (warning) */
  --_yellow:  #FFE500;

  /* Pure dark (no color tint) */
  --_n0: #050505;
  --_n1: #0E0E0E;
  --_n2: #161616;
  --_n3: #1E1E1E;
  --_n4: #2C2C2C;
  --_n5: #3A3A3A;
}

/* ---------- Semantic tokens ---------- */
:root {
  /* Brand — cyan as the primary solid UI color, gradient as the signature */
  --color-brand:       var(--_cyan-bright);
  --color-brand-light: #80F0FF;
  --color-brand-dim:   rgba(0, 229, 255, 0.25);
  --color-brand-dark:  var(--_cyan-deep);

  /* Status */
  --color-success: var(--_lime-bright);
  --color-info:    var(--_cyan-bright);
  --color-warning: var(--_yellow);
  --color-danger:  var(--_pink-bright);

  /* Accent colors for direct use */
  --color-lime: var(--_lime-bright);
  --color-cyan: var(--_cyan-bright);
  --color-pink: var(--_pink-bright);

  /* Surface (3 depth levels) — pure dark, near-black */
  --surface-0:        var(--_n0);                   /* page background */
  --surface-0-solid:  var(--_n1);
  --surface-1:        rgba(255, 255, 255, 0.042);   /* main cards / panels */
  --surface-1-solid:  var(--_n2);
  --surface-2:        rgba(255, 255, 255, 0.08);    /* elevated / hover */
  --surface-overlay:  rgba(0, 0, 0, 0.88);          /* modal backdrops */

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.58);
  --text-muted:     rgba(255, 255, 255, 0.34);
  --text-inverse:   #050505;

  /* Borders */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.15);
  --border-strong:  rgba(255, 255, 255, 0.28);
  --border-brand:   rgba(0, 229, 255, 0.45);

  /* Glows (one per acid color) */
  --glow-lime:         rgba(174, 255, 0, 0.32);
  --glow-lime-subtle:  rgba(174, 255, 0, 0.10);
  --glow-cyan:         rgba(0, 229, 255, 0.30);
  --glow-cyan-subtle:  rgba(0, 229, 255, 0.09);
  --glow-pink:         rgba(255, 32, 121, 0.32);
  --glow-pink-subtle:  rgba(255, 32, 121, 0.09);

  /* Legacy glow names pointing to cyan */
  --glow-brand:        var(--glow-cyan);
  --glow-brand-subtle: var(--glow-cyan-subtle);
  --glow-success:      var(--glow-lime);
  --glow-info:         var(--glow-cyan);

  /* Shadows */
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.60);
  --shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.72);
  --shadow-brand: 0 0 24px rgba(0, 229, 255, 0.30);
  --shadow-lime:  0 0 24px rgba(174, 255, 0, 0.28);
  --shadow-pink:  0 0 24px rgba(255, 32, 121, 0.28);

  /* Gradients — the iridescent signature */
  --gradient-brand:      linear-gradient(135deg, #AEFF00 0%, #00E5FF 50%, #FF2079 100%);
  --gradient-brand-h:    linear-gradient(90deg,  #AEFF00 0%, #00E5FF 50%, #FF2079 100%);
  --gradient-lime-cyan:  linear-gradient(135deg, #AEFF00 0%, #00E5FF 100%);
  --gradient-cyan-pink:  linear-gradient(135deg, #00E5FF 0%, #FF2079 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(174,255,0,0.15) 0%, rgba(0,229,255,0.15) 50%, rgba(255,32,121,0.15) 100%);
  --gradient-btn:        var(--gradient-brand);
  --gradient-primary:    var(--gradient-brand);
  --gradient-header:     linear-gradient(180deg, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.90) 100%);

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans:    'Outfit', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-display: 'Outfit', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font scale (4px steps) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;

  /* Motion */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   0.15s var(--ease-out);
  --transition-smooth: 0.25s var(--ease-out);
  --transition-spring: 0.30s var(--ease-spring);
}

/* ---------- Legacy aliases (backwards-compat with all pages) ---------- */
:root {
  /* canvas.html */
  --bg-deep:            var(--surface-0);
  --bg-panel:           var(--surface-1);
  --bg-panel-solid:     var(--surface-0-solid);
  --bg-elevated:        var(--surface-2);
  --line:               var(--border-subtle);
  --line-hover:         var(--border-default);
  --line-soft:          var(--border-subtle);
  --glass-border:       var(--border-subtle);
  --glass-border-hover: var(--border-default);
  --glass-border-light: var(--border-default);
  --text:               var(--text-primary);
  --text-sub:           var(--text-secondary);
  --text-main:          var(--text-primary);
  --muted:              var(--text-muted);
  --purple:             var(--color-brand);
  --purple-bright:      var(--color-brand-light);
  --purple-deep:        var(--color-brand-dark);
  --purple-glow:        var(--glow-brand);
  --purple-subtle:      var(--glow-brand-subtle);
  --shadow-purple:      var(--shadow-brand);

  /* index / project / series / team / library */
  --bg-color:        var(--surface-0);
  --bg-dark:         var(--surface-0);
  --bg-darker:       var(--surface-0);
  --card-bg:         var(--surface-1);
  --card-border:     var(--border-subtle);
  --panel-bg:        var(--surface-1);
  --panel-bg-strong: var(--surface-overlay);
  --panel-hover:     var(--surface-2);
  --panel-card:      var(--surface-2);
  --row-hover:       rgba(0, 229, 255, 0.05);
  --border-color:    var(--border-subtle);
  --border:          var(--border-subtle);
  --accent-purple:   var(--color-brand);
  --accent-green:    var(--color-success);
  --accent-cyan:     var(--color-info);
  --accent-amber:    var(--color-warning);
  --danger:          var(--color-danger);
  --text-tertiary:   var(--text-muted);

  /* duli-image / duli-video */
  --bg0:         var(--surface-0);
  --bg1:         var(--surface-0-solid);
  --bg2:         var(--surface-1-solid);
  --panel:       var(--surface-1);
  --panel-2:     var(--surface-2);
  --primary:     var(--color-brand);
  --primary2:    var(--color-brand-light);
  --primary-hover: var(--color-brand-dark);

  /* series_detail */
  --bg-deep: var(--surface-0);

  /* short.html */
  --bg:           var(--surface-0);
  --panel-strong: var(--surface-2);
  --panel-soft:   var(--surface-1);
  --text-dim:     var(--text-muted);
  --blue:         var(--color-brand);
  --cyan:         var(--color-brand);

  /* short_detail.html */
  --accent:      var(--color-brand);
  --accent-2:    var(--color-brand-light);
  --accent-soft: var(--glow-brand-subtle);
  --blue-soft:   rgba(0, 229, 255, 0.09);
  --line-strong: var(--border-default);

  /* team_manage.html */
  --bg-layout:    var(--surface-0);
  --bg-sidebar:   var(--surface-0-solid);
  --bg-content:   var(--_n0);
  --bg-hover:     var(--surface-2);
  --border-light: var(--border-subtle);
  --success:      var(--color-success);
  --success-bg:   var(--glow-lime-subtle);
  --warning:      var(--color-warning);
  --primary-hover: var(--color-brand-dark);
  --warning-bg:   rgba(255, 229, 0, 0.10);
  --purple-bg:    var(--glow-cyan-subtle);
  --shadow-panel: var(--shadow-lg);
}

/* ---------- Global reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------- Noise texture ---------- */
html {
  scroll-behavior: smooth;
}
html::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #AEFF00, #00E5FF);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #AEFF00, #00E5FF, #FF2079);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Iridescent text utility (apply to headings/logos) ---------- */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Iridescent border utility ---------- */
.border-gradient {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.border-gradient::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-brand);
  z-index: -1;
}