/* ============================================
   Bagus Life Solution — Design Tokens
   For use with Firebase Hosting / Web project
   ============================================ */

:root {
  /* --- Brand Colors --- */
  --bagus-purple-900: #26215C;
  --bagus-purple-800: #3C3489;
  --bagus-purple-600: #534AB7;   /* PRIMARY — logo, headings */
  --bagus-purple-400: #7F77DD;
  --bagus-purple-200: #AFA9EC;
  --bagus-purple-100: #CECBF6;
  --bagus-purple-50:  #EEEDFE;

  --bagus-teal-900:   #04342C;
  --bagus-teal-800:   #085041;
  --bagus-teal-600:   #0F6E56;
  --bagus-teal-400:   #1D9E75;   /* SECONDARY — tagline, wave accent */
  --bagus-teal-200:   #5DCAA5;
  --bagus-teal-100:   #9FE1CB;
  --bagus-teal-50:    #E1F5EE;

  --bagus-blue-900:   #042C53;
  --bagus-blue-800:   #0C447C;
  --bagus-blue-600:   #185FA5;   /* TERTIARY — IT accent, dot */
  --bagus-blue-400:   #378ADD;
  --bagus-blue-200:   #85B7EB;
  --bagus-blue-100:   #B5D4F4;
  --bagus-blue-50:    #E6F1FB;

  --bagus-gray-900:   #2C2C2A;   /* body text */
  --bagus-gray-600:   #5F5E5A;   /* secondary text */
  --bagus-gray-200:   #B4B2A9;   /* border */
  --bagus-gray-50:    #F1EFE8;   /* page background */

  /* --- Semantic Aliases --- */
  --color-primary:    var(--bagus-purple-600);
  --color-secondary:  var(--bagus-teal-400);
  --color-accent:     var(--bagus-blue-600);
  --color-bg:         #FFFFFF;
  --color-bg-subtle:  var(--bagus-gray-50);
  --color-text:       var(--bagus-gray-900);
  --color-text-muted: var(--bagus-gray-600);
  --color-border:     var(--bagus-gray-200);

  /* --- Typography --- */
  --font-en: 'Inter', 'Outfit', 'Arial', sans-serif;
  --font-ja: 'Noto Sans JP', 'BIZ UDPGothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* --- Spacing scale --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:    var(--bagus-purple-400);
    --color-secondary:  var(--bagus-teal-200);
    --color-accent:     var(--bagus-blue-200);
    --color-bg:         #13112b;
    --color-bg-subtle:  #1e1b4b;
    --color-text:       #f0efff;
    --color-text-muted: var(--bagus-purple-200);
    --color-border:     var(--bagus-purple-900);
  }
}

/* ---- Utility classes ---- */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent    { color: var(--color-accent); }
.bg-primary     { background: var(--color-primary); color: #fff; }
.bg-subtle      { background: var(--color-bg-subtle); }

.btn-primary {
  background: var(--bagus-purple-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 28px;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--bagus-purple-800); }

.btn-outline {
  background: transparent;
  color: var(--bagus-purple-600);
  border: 1.5px solid var(--bagus-purple-600);
  border-radius: var(--radius-md);
  padding: 11px 28px;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover {
  background: var(--bagus-purple-50);
}