/* =========================================================
   Hang Global — Theme Tokens (Single Source of Truth)
   Edit ONLY this file to retheme the entire website.
   ========================================================= */

:root {
  /* -------------------------
     Brand / core colors
     ------------------------- */
  /* Dark theme preset (better harmony with dark imagery) */
  --hg-primary-rgb: 56, 189, 248;    /* sky-400 */
  --hg-accent-rgb: 99, 102, 241;     /* indigo-500 */
  --hg-info-rgb: 34, 211, 238;       /* cyan-400 */
  --hg-success-rgb: 34, 197, 94;     /* green-500 */
  --hg-warning-rgb: 245, 158, 11;    /* amber-500 */
  --hg-danger-rgb: 248, 113, 113;    /* red-400 */

  /* -------------------------
     Neutrals (UI surfaces)
     ------------------------- */
  --hg-ink-rgb: 2, 6, 23;            /* near-black */
  --hg-text-rgb: 226, 232, 240;      /* slate-200 */
  --hg-muted-rgb: 148, 163, 184;     /* slate-400 */
  --hg-border-rgb: 51, 65, 85;       /* slate-700 */
  --hg-bg-rgb: 6, 10, 23;            /* deep navy */
  --hg-surface-rgb: 11, 18, 32;      /* card surface */
  --hg-surface-2-rgb: 15, 23, 42;    /* section alt */

  /* -------------------------
     Typography
     ------------------------- */
  --hg-font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";

  /* -------------------------
     Radii / shadows
     ------------------------- */
  --hg-radius-xl: 1.25rem;
  --hg-radius-lg: 1rem;
  --hg-shadow-soft: 0 18px 60px rgba(2, 6, 23, 0.12);
  --hg-shadow-card: 0 10px 30px rgba(2, 6, 23, 0.10);

  /* -------------------------
     Component tokens
     ------------------------- */
  --hg-topbar-bg: rgba(2, 6, 23, 0.92);
  --hg-navbar-bg: rgba(11, 18, 32, 0.78);

  --hg-hero-overlay-1: rgba(2, 6, 23, 0.80);
  --hg-hero-overlay-2: rgba(2, 6, 23, 0.45);

  --hg-glass-bg: rgba(255, 255, 255, 0.06);
  --hg-glass-border: rgba(255, 255, 255, 0.14);

  --hg-footer-bg: #070b16;

  /* -------------------------
     Image tokens (placeholders)
     Set via inline style in HTML, e.g.
     style="--hg-hero-image: url('https://...')"
     ------------------------- */
  --hg-hero-image: none;
  --hg-about-image: none;
  --hg-card-image: none;
}

/* =========================================================
   Bootstrap theme overrides (so btn-primary etc match theme)
   ========================================================= */
:root {
  --bs-body-font-family: var(--hg-font-sans);
  --bs-body-bg: rgb(var(--hg-bg-rgb));
  --bs-body-color: rgb(var(--hg-text-rgb));

  --bs-border-color: rgba(var(--hg-border-rgb), 0.95);

  --bs-primary: rgb(var(--hg-primary-rgb));
  --bs-primary-rgb: var(--hg-primary-rgb);

  --bs-success: rgb(var(--hg-success-rgb));
  --bs-success-rgb: var(--hg-success-rgb);

  --bs-danger: rgb(var(--hg-danger-rgb));
  --bs-danger-rgb: var(--hg-danger-rgb);

  --bs-warning: rgb(var(--hg-warning-rgb));
  --bs-warning-rgb: var(--hg-warning-rgb);

  --bs-info: rgb(var(--hg-info-rgb));
  --bs-info-rgb: var(--hg-info-rgb);

  --bs-link-color: rgb(var(--hg-primary-rgb));
  --bs-link-hover-color: rgba(var(--hg-primary-rgb), 0.85);

  /* More Bootstrap tokens (to avoid “too white” defaults) */
  --bs-emphasis-color: rgb(var(--hg-text-rgb));
  --bs-secondary-color: rgba(var(--hg-text-rgb), 0.78);
  --bs-tertiary-color: rgba(var(--hg-text-rgb), 0.62);

  --bs-secondary-bg: rgb(var(--hg-surface-rgb));
  --bs-tertiary-bg: rgb(var(--hg-surface-2-rgb));
}