/* ==========================================================================
   SixPoint — shared design tokens & reset
   Used by both landing.css (Layer 1) and core.css (Layer 2).

   Renovasi SIXPOINT (2026-08-31) — theme aligned with the old SIXPOINT site
   (Combined/templates/login.html & dashboard.html), per user instruction:
   "pelajari secara detail Tema Website yang telah saya pakai di SIXPOINT
   sebelumya, Background, Font dan lain lain. kita selaraskan temanya dengan
   tema yang lama agar dari sisi visual tetap sama" (study the old SIXPOINT
   theme in detail - background, font, etc. - and align the new theme with
   it so the visual stays the same).

   The old site uses Tailwind CDN with a dark "terminal" scheme:
     - body/background: .terminal-bg #111214 (near-black)
     - card/panel:       .card-bg    #1a1c1f (login.html) / #1a1c22 (dashboard.html)
                          -> unified into a single --surface token here
     - border:           #2d3136
     - body text:         text-gray-300 (~#d1d5db), headings white
     - primary accent:    gold/yellow (Tailwind yellow-600/500/400, ~#eab308)
       with a glow shadow rgba(234,179,8,0.35)
     - NO custom font (no @font-face / Google Fonts anywhere) - the old site
       relies purely on Tailwind's defaults: font-sans for regular text,
       font-mono for all numbers/data/timestamps. Because of that, the
       Google Fonts import (Archivo/IBM Plex) previously used here has been
       REMOVED and replaced with the equivalent system stack, so "Font"
       is aligned too, as requested.
     - the old site's VIP platform overrides to blue; Layer 1/2 here is the
       public/lead area (not tied to a specific platform), so it keeps gold
       as the primary accent (equivalent to the old site's default/MT5
       theme), not the VIP-blue scheme.
   ========================================================================== */

:root {
  --bg: #111214;            /* == old site's .terminal-bg */
  --surface: #1a1c1f;        /* == old site's .card-bg */
  --surface-2: #202226;      /* one step lighter than --surface, for hover/strip states */
  --ink: #f5f5f5;             /* headings: white */
  --ink-soft: #d1d5db;        /* body text: old site's text-gray-300 */
  --ink-faint: #8a8f98;       /* secondary/meta text: equivalent to text-gray-500 */
  --line: #2d3136;            /* old site's border color */

  --accent: #eab308;          /* old site's primary accent: gold/yellow-500 */
  --accent-ink: #111214;      /* text on top of a gold button: dark, not white (contrast, matches old site) */
  --accent-soft: #2a2410;     /* dimmed gold for chip/badge backgrounds on a dark theme */
  --gold: #eab308;            /* same as --accent - kept as an alias, used in a few places as a color label */
  --gold-soft: #2a2410;

  --danger: #f87171;          /* equivalent to Tailwind's text-red-400, for error text on a dark background */
  --danger-soft: #3a1f1f;

  --radius: 14px; /* the old site uses large border-radius values (rounded-xl/2xl/3xl) */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -10px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 20px 50px -15px rgba(234, 179, 8, 0.35); /* old site's .shadow-yellow-glow */
  --max-w: 1120px;

  /* Old site: no custom font, purely Tailwind defaults. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

img { max-width: 100%; display: block; }

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

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px; /* pill-shaped, like the old site's buttons (rounded-full) */
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #111214; /* dark text on top of the gold button, mirrors the old site's bg-yellow-600 text-black */
  font-weight: 700;
}
.btn-primary:hover { background: #d4a107; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; }

/* Forms ----------------------------------------------------------------- */

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field .error-msg {
  color: var(--danger);
  font-size: 13px;
  margin-top: 6px;
}
.field.has-error input,
.field.has-error select {
  border-color: var(--danger);
}

.form-error-banner {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

.helper-text {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: -10px;
  margin-bottom: 18px;
}

/* Badges ------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.badge-gold { background: var(--gold-soft); color: var(--gold); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }