/* ============================================================
   gs.town — community city platform for Gading Serpong
   Palette: gs.town (civic blue + coral + lime + amber + slate)
   Applied with INDIE restraint: quiet shadows, 4pt spacing,
   circular category badges, subtle borders, no decorative gradients.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ===== Raw palette ===== */
  --blue:       #1B4FD8;
  --blue-700:   #1740AE;
  --blue-600:   #1A45B8;
  --blue-300:   #6E92EC;
  --blue-100:   #DCE6FF;
  --blue-50:    #EEF3FF;

  --coral:      #FF5A5F;
  --coral-700:  #D9474C;
  --coral-600:  #EE4E53;
  --coral-100:  #FFD9DB;
  --coral-50:   #FFEEEF;

  --lime:       #22C55E;
  --lime-700:   #15803D;
  --lime-100:   #C7F0D6;
  --lime-50:    #E7F9EF;

  --amber:      #F59E0B;
  --amber-700:  #B45309;
  --amber-100:  #FCE6BC;
  --amber-50:   #FEF4E2;

  --violet:     #7C3AED;
  --violet-100: #E5D8FB;
  --violet-50:  #F2ECFE;

  /* slate neutrals */
  --s-50:  #F8FAFC;
  --s-100: #F1F5F9;
  --s-200: #E2E8F0;
  --s-300: #CBD5E1;
  --s-400: #94A3B8;
  --s-500: #64748B;
  --s-600: #475569;
  --s-700: #334155;
  --s-800: #1E293B;
  --s-900: #0F172A;
  --s-950: #0A0F1C;

  /* ===== Semantic (light) ===== */
  --bg:          #EEF1F6;
  --surface:     #FFFFFF;
  --surface-2:   #F4F6FA;
  --surface-3:   #ECF0F6;
  --on-blue:     #FFFFFF;

  --text-1: var(--s-900);
  --text-2: var(--s-600);
  --text-3: var(--s-400);

  --border:        var(--s-200);
  --border-strong: var(--s-300);

  --primary:       var(--blue);
  --primary-soft:  var(--blue-50);
  --primary-soft-2:var(--blue-100);
  --cta:           var(--coral);
  --cta-hover:     var(--coral-600);

  /* status */
  --open:    var(--coral);
  --proses:  var(--amber);
  --selesai: var(--lime);

  /* ===== Type ===== */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Radius ===== */
  --r-chip: 999px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-card: 16px;
  --r-lg: 22px;

  /* ===== Shadows (quiet) ===== */
  --sh-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
  --sh-2: 0 4px 12px -2px rgba(15,23,42,0.10), 0 2px 6px -2px rgba(15,23,42,0.06);
  --sh-3: 0 14px 34px -10px rgba(15,23,42,0.22);
  --sh-cta: 0 6px 16px -4px rgba(255,90,95,0.45);
  --sh-up:  0 -8px 24px -10px rgba(15,23,42,0.18);

  /* ===== Motion ===== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
  --dur-fast: 130ms;
}

[data-theme="dark"] {
  --bg:        #060B16;
  --surface:   #131C2E;
  --surface-2: #1B2740;
  --surface-3: #223150;
  --on-blue:   #FFFFFF;

  --text-1: #EEF2F9;
  --text-2: #9FB0C9;
  --text-3: #5E708C;

  --border:        #26334D;
  --border-strong: #34466A;

  --primary:       #6E92EC;
  --primary-soft:  rgba(110,146,236,0.16);
  --primary-soft-2:rgba(110,146,236,0.26);
  --cta:           #FF5A5F;
  --cta-hover:     #FF6E72;

  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 6px 16px -4px rgba(0,0,0,0.5);
  --sh-3: 0 18px 40px -12px rgba(0,0,0,0.6);
  --sh-cta: 0 6px 18px -4px rgba(255,90,95,0.5);
  --sh-up:  0 -10px 30px -12px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }

.gs-app {
  font-family: var(--font);
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}
.gs-app *::-webkit-scrollbar { width: 0; height: 0; }
.gs-app { scrollbar-width: none; }

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* hide native number spinners etc not needed */
.gs-app h1, .gs-app h2, .gs-app h3, .gs-app h4, .gs-app p { margin: 0; }

@keyframes gsPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes gsBounceIn {
  0%   { transform: translateY(8px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes gsSheetUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes gsFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gsPinDrop {
  0%   { transform: translate(-50%,-160%) scale(0.6); opacity: 0; }
  60%  { transform: translate(-50%,-92%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%,-100%) scale(1); opacity: 1; }
}