/* ============================================================
   THEME SYSTEM — anthill.hk
   Default: Light / Sunny / Clear-blue-sky Hong Kong skyline
   ============================================================ */

:root,
[data-theme="light"] {
  /* Sky & Skyline */
  --sky-top:        #3b9eed;
  --sky-bottom:     #a8dff7;
  --skyline-fill:   #1a365d;
  --water:          #60b8f0;

  /* Brand */
  --accent:         #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-light:   #dbeafe;
  --accent-subtle:  #eff6ff;

  /* Surfaces */
  --bg:             #ffffff;
  --bg-alt:         #f8fafc;
  --bg-card:        #ffffff;
  --bg-elevated:    #ffffff;

  /* Text */
  --text:           #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-on-accent: #ffffff;

  /* Borders */
  --border:         #e2e8f0;
  --border-light:   #f1f5f9;

  /* Misc */
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      20px;
  --shadow-sm:      0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:      0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:      0 12px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  --shadow-glow:    0 0 40px rgba(37,99,235,.15);

  /* Transitions */
  --transition:     0.25s cubic-bezier(.4,0,.2,1);

  /* Gradient */
  --gradient-text:  linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #06b6d4 100%);
  --gradient-card:  linear-gradient(135deg, var(--accent-subtle) 0%, #fff 100%);

  color-scheme: light;
}

[data-theme="dark"] {
  --sky-top:        #0c1929;
  --sky-bottom:     #162033;
  --skyline-fill:   #60a5fa;
  --water:          #1e3a5f;

  --accent:         #60a5fa;
  --accent-hover:   #93c5fd;
  --accent-light:   #1e3a5f;
  --accent-subtle:  #0f1d32;

  --bg:             #0b1120;
  --bg-alt:         #111827;
  --bg-card:        #1a2332;
  --bg-elevated:    #1f2937;

  --text:           #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-on-accent: #0b1120;

  --border:         #1e293b;
  --border-light:   #1e293b;

  --shadow-sm:      0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:      0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:      0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --shadow-glow:    0 0 40px rgba(96,165,250,.2);

  --gradient-text:  linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #22d3ee 100%);
  --gradient-card:  linear-gradient(135deg, #1a2332 0%, #0f1d32 100%);

  color-scheme: dark;
}