/* ============================================================
   NUSANTARA THEME FILE — BLACK & WHITE EDITION
   ============================================================
   Edit the values below to change the look of the website.
   This file is loaded by all HTML pages automatically.

   HOW TO USE:
   - Change colors, fonts, sizes here
   - Save the file
   - Refresh your browser to see changes

   ============================================================ */


/* ------------------------------------------------------------
   1. CORE BACKGROUND COLORS
   The site has 3 background layers used throughout all pages:
   - primary   : darkest  (main page background, footer, navbar)
   - secondary : mid tone (section backgrounds, cards)
   - teritiary : lightest (hover states, borders, input fills)
   ------------------------------------------------------------ */

:root {
  --color-primary:   0, 0, 0;       /* #000000 — pure black             */
  --color-secondary: 12, 12, 12;    /* #0C0C0C — near-black mid layer   */
  --color-teritiary: 28, 28, 28;    /* #1C1C1C — subtle surface lift    */
}


/* ------------------------------------------------------------
   2. ACCENT COLOR (Buttons, links, highlights)
   Replaced violet/purple with white — stark B&W contrast.
   ------------------------------------------------------------ */

:root {
  --accent-500: #ffffff;   /* pure white                               */
  --accent-600: #e0e0e0;   /* light gray — buttons, active states      */
  --accent-700: #b0b0b0;   /* mid gray — button hover                  */
  --accent-800: #707070;   /* dim gray — scrollbar thumb, deep accents */
}


/* ------------------------------------------------------------
   3. TEXT COLORS
   ------------------------------------------------------------ */

:root {
  --text-primary:   #ffffff;   /* main headings & body text            */
  --text-muted:     #c0c0c0;   /* subtitles, descriptions              */
  --text-subtle:    #888888;   /* captions, secondary info             */
  --text-dark:      #000000;   /* used on light backgrounds            */
}


/* ------------------------------------------------------------
   4. BORDER COLORS
   ------------------------------------------------------------ */

:root {
  --border-color: rgb(30, 30, 30);
}


/* ------------------------------------------------------------
   5. SCROLLBAR COLORS
   ------------------------------------------------------------ */

:root {
  --scrollbar-track:  #000000;
  --scrollbar-thumb:  #555555;
}


/* ------------------------------------------------------------
   6. TYPOGRAPHY
   ------------------------------------------------------------ */

:root {
  --font-body:    'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
}


/* ------------------------------------------------------------
   7. SPACING & BORDER RADIUS
   ------------------------------------------------------------ */

:root {
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
}


/* ------------------------------------------------------------
   8. NAVBAR
   ------------------------------------------------------------ */

:root {
  --navbar-height:      4rem;
  --navbar-bg:          rgb(var(--color-primary));
  --navbar-border:      rgb(var(--color-teritiary));
  --navbar-link-hover:  rgb(var(--color-secondary));
}


/* ------------------------------------------------------------
   9. ANNOUNCEMENT BAR (top strip)
   ------------------------------------------------------------ */

:root {
  --topbar-bg:    rgb(var(--color-teritiary));
  --topbar-text:  var(--text-primary);
}


/* ------------------------------------------------------------
   10. DISCORD BANNER (bottom strip)
   ------------------------------------------------------------ */

:root {
  --discord-banner-bg:    #1c1c1c;
  --discord-banner-text:  #ffffff;
}


/* ============================================================
   APPLY VARIABLES TO SITE ELEMENTS
   ============================================================ */

/* Base */
html, body {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: #000000 !important;
}

/* Background layers */
.bg-primary   { background-color: rgb(var(--color-primary))   !important; }
.bg-secondary { background-color: rgb(var(--color-secondary)) !important; }
.bg-teritiary { background-color: rgb(var(--color-teritiary)) !important; }

/* Text colors */
.text-gray-300 { color: var(--text-muted)   !important; }
.text-gray-400 { color: var(--text-subtle)  !important; }
.text-white    { color: var(--text-primary)  !important; }

/* Borders */
.border-teritiary { border-color: var(--border-color) !important; }

/* Accent buttons: white on black */
.bg-violet-600,
.bg-violet-700,
.bg-violet-500 {
  background-color: var(--accent-600) !important;
  color: #000000 !important;
}
.bg-violet-600:hover { background-color: var(--accent-700) !important; }

/* Accent text & outlines */
.text-violet-600  { color: var(--accent-600) !important; }
.text-violet-800  { color: var(--accent-800) !important; }
.outline-violet-600 { outline-color: var(--accent-600) !important; }

/* Navbar */
nav.sticky {
  background-color: var(--navbar-bg) !important;
  border-bottom-color: var(--navbar-border) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary);
}

/* Scrollbar */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }


/* ============================================================
   HARDCODED COLOR OVERRIDES
   The HTML and embedded JS contain hardcoded hex/rgba values
   from the original dark theme. These rules override them all.
   ============================================================ */

/* Old primary #1E2227 */
[style*="#1E2227"],
[style*="#1e2227"] {
  background-color: #000000 !important;
}

/* Old secondary #23272E */
[style*="#23272E"],
[style*="#23272e"] {
  background-color: #0c0c0c !important;
}

/* Old teritiary #2F3440 */
[style*="#2F3440"],
[style*="#2f3440"] {
  background-color: #1c1c1c !important;
}

/* Hero section radial-gradient overlays — darken & desaturate */
.absolute.inset-0[style*="background-image"] {
  filter: brightness(0.55) grayscale(1) !important;
}

/* Discord / CTA banner */
.bg-violet-600.px-6 {
  background-color: #1c1c1c !important;
  color: #ffffff !important;
  border-top: 1px solid #2a2a2a !important;
}

/* Footer payment strip */
.bg-gray-100 {
  background-color: #1c1c1c !important;
}

/* Feature cards */
.rounded-xl.border-teritiary {
  border: 1px solid #2a2a2a !important;
  background-color: rgba(255,255,255,0.02) !important;
}

/* Trustpilot section */
section#trustpilot {
  background-color: #0c0c0c !important;
}

/* "Client Area" button */
a .bg-violet-600,
button.bg-violet-600 {
  background-color: #e0e0e0 !important;
  color: #000000 !important;
  font-weight: 600;
}
a .bg-violet-600:hover,
button.bg-violet-600:hover {
  background-color: #ffffff !important;
}


/* ============================================================
   QUICK THEME PRESETS
   ============================================================
   Uncomment ONE of the presets below to instantly switch
   the site to a different color theme.
   ============================================================ */


/* --- PRESET: Ocean Blue ---
:root {
  --color-primary:   15, 23, 42;
  --color-secondary: 30, 41, 59;
  --color-teritiary: 51, 65, 85;
  --accent-500: #38bdf8;
  --accent-600: #0284c7;
  --accent-700: #0369a1;
  --accent-800: #075985;
}
*/

/* --- PRESET: Emerald Green ---
:root {
  --color-primary:   5, 30, 15;
  --color-secondary: 6, 45, 22;
  --color-teritiary: 20, 70, 40;
  --accent-500: #34d399;
  --accent-600: #059669;
  --accent-700: #047857;
  --accent-800: #065f46;
}
*/

/* --- PRESET: Crimson Red ---
:root {
  --color-primary:   30, 10, 10;
  --color-secondary: 45, 15, 15;
  --color-teritiary: 70, 20, 20;
  --accent-500: #f87171;
  --accent-600: #dc2626;
  --accent-700: #b91c1c;
  --accent-800: #991b1b;
}
*/

/* --- PRESET: Midnight Gold ---
:root {
  --color-primary:   20, 18, 10;
  --color-secondary: 32, 28, 14;
  --color-teritiary: 55, 48, 20;
  --accent-500: #fcd34d;
  --accent-600: #d97706;
  --accent-700: #b45309;
  --accent-800: #92400e;
}
*/

/* --- PRESET: Light Mode ---
:root {
  --color-primary:   245, 245, 250;
  --color-secondary: 255, 255, 255;
  --color-teritiary: 226, 232, 240;
  --text-primary:  #1e293b;
  --text-muted:    #475569;
  --text-subtle:   #64748b;
  --accent-600: #7c3aed;
  --accent-700: #6d28d9;
}
*/