/*!
 * base.css — Core Modular Stylesheet
 * Created on: 2025-08-06
 * Version: 1.0.0™
 * Description:
 *   This file defines the root variables and base element styles for a
 *   dark‐theme website with golden accents. It includes typography,
 *   color variables, utility classes, and foundational component styles.
 */

:root {
  /* Color Palette */
  --color-bg:             #000000; /* Pure black background */
  --color-text:           #EEEEEE; /* Light grey text */
  --color-primary:        #FFD700; /* Gold primary accent */
  --color-secondary:      #FFC107; /* Lighter golden highlight */
  --color-border:         #B8860B; /* Dark goldenrod for borders */
  --color-muted:          #555555; /* Muted grey for less emphasis */
  --color-link:           var(--color-primary);
  --color-link-hover:     var(--color-secondary);

  /* Typography */
  --font-sans:            'Open Sans', Arial, sans-serif;
  --font-heading:         'Montserrat', sans-serif;
  --font-size-base:       16px;
  --font-size-sm:         0.875rem;  /* 14px */
  --font-size-lg:         1.125rem;  /* 18px */
  --line-height-base:     1.6;

  /* Spacing */
  --space-xxs:            0.25rem;   /* 4px */
  --space-xs:             0.5rem;    /* 8px */
  --space-sm:             0.75rem;   /* 12px */
  --space-md:             1rem;      /* 16px */
  --space-lg:             1.5rem;    /* 24px */
  --space-xl:             2rem;      /* 32px */

  /* Borders & Radius */
  --border-width:         2px;
  --border-radius:        0.5rem;    /* 8px */

  /* Transitions */
  --transition-fast:      0.2s ease-in-out;
  --transition-base:      0.3s ease-in-out;
}

/* ========== Global Reset & Box Sizing ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  line-height: var(--line-height-base);
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

/* ========== Links & Buttons ========== */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  outline: none;
}

/* Button Base */
.btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  color: var(--color-bg);
  background-color: var(--color-primary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  text-align: center;
}

.btn:hover,
.btn:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-primary);
}

/* ========== Layout Utilities ========== */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) 0;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  gap: var(--space-md);
}

/* ========== Forms ========== */
input,
textarea,
select {
  width: 100%;
  padding: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: #111111;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* ========== Tables ========== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}

th,
td {
  padding: var(--space-sm);
  border: var(--border-width) solid var(--color-border);
}

th {
  background-color: #111111;
  color: var(--color-primary);
  text-align: left;
}

/* ========== Components ========== */
/* Card Component */
.card {
  background-color: #111111;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
}

/* Navbar */
.navbar {
  background-color: #111111;
  border-bottom: var(--border-width) solid var(--color-border);
}

.navbar .nav-item {
  margin-right: var(--space-lg);
}

.navbar .nav-link {
  color: var(--color-text);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.navbar .nav-link:hover {
  color: var(--color-primary);
}

/* Footer */
.footer {
  background-color: #111111;
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-lg) 0;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-sm       { margin-top: var(--space-sm); }
.mt-md       { margin-top: var(--space-md); }
.mt-lg       { margin-top: var(--space-lg); }
.mb-sm       { margin-bottom: var(--space-sm); }
.mb-md       { margin-bottom: var(--space-md); }
.mb-lg       { margin-bottom: var(--space-lg); }

.hidden { display: none !important; }
.visible { display: block !important; }