/* ===========================================
   BASE STYLES - Foundation for all pages
   =========================================== */

/* Basic CSS Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===========================================
   BODY & HTML - Main page foundation
   =========================================== */

html,
body {
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--moonlight);
  line-height: 1.5;
}

body {
  /* Forest background with subtle texture */
  background: radial-gradient(
      circle at 25% 25%,
      var(--tree-bark-dark) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, var(--earth-brown) 0%, transparent 50%),
    linear-gradient(
      135deg,
      var(--forest-shadow) 0%,
      var(--forest-floor) 50%,
      var(--forest-shadow) 100%
    );

  /* Prevent horizontal scrolling */
  overflow-x: hidden;
}

/* ===========================================
   TYPOGRAPHY - Text styling
   =========================================== */

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: normal;
  color: var(--moonlight);
  text-shadow: none;
  line-height: 1.3;
}

h1 {
  font-size: var(--text-4xl);
  font-family: var(--font-title);
  color: var(--moss-green-light);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

/* Paragraphs and text */
p {
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

/* Links */
a {
  color: var(--moss-green-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--moonlight);
  text-shadow: 0 0 4px var(--moss-green);
}

/* Strong/Bold text */
strong,
b {
  color: var(--moonlight);
  font-weight: 600;
}

/* ===========================================
   UTILITY CLASSES - Reusable helpers
   =========================================== */

/* Text colors */
.text-primary {
  color: var(--moonlight);
}
.text-secondary {
  color: var(--moonlight-dim);
}
.text-success {
  color: var(--success-green);
}
.text-warning {
  color: var(--warning-amber);
}
.text-danger {
  color: var(--realmchild-red);
}
.text-muted {
  color: var(--steel-gray);
}

/* Text sizes */
.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}

/* Text shadows */
.text-shadow {
  text-shadow: var(--text-shadow-sm);
}
.text-shadow-lg {
  text-shadow: var(--text-shadow-md);
}

/* Display utilities */
.hidden {
  display: none;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}

/* Spacing utilities */
.m-0 {
  margin: 0;
}
.p-0 {
  padding: 0;
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}

/* ===========================================
   FOCUS STATES - Accessibility
   =========================================== */

/* Custom focus outline for better visibility */
*:focus {
  outline: 2px solid var(--moss-green-light);
  outline-offset: 2px;
}

/* Remove focus outline on mouse interactions */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===========================================
   SCROLLBARS - Custom styling
   =========================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--forest-shadow);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--moss-green);
  border-radius: var(--radius-sm);
  border: 1px solid var(--moss-green-dark);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--moss-green-light);
}