/* ==================================================
   BASE.CSS
   Design System + Global Foundation
   ================================================== */


/* =========================
   GLOBAL VARIABLES
========================= */

:root {
  --color-primary: #0D47A1;
  --color-secondary: #FFC107;

  /* Text hierarchy */
  --color-text: #212121;
  --color-secondary-text: #424242;
  --color-tertiary-text: #616161;

  /* Surfaces */
  --color-bg: #F5F5F5;
  --color-surface: #ffffff;
  --color-card: #ffffff;
  --color-alt-surface: #f5f5f5;

  /* UI elements */
  --color-marker-border: #ccc;
  --color-thumb-color: #212121;

  /* Tags */
  --color-tag-bg: #000;
  --color-tag-text: #fff;

  /* Typography */
  --font-family-base: 'Inter', sans-serif;

  /* Layout */
  --radius: 6px;
  --transition-speed: 0.3s;
}


/* =========================
   DARK MODE (AUTO)
========================= */

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e0e0e0;
    --color-secondary-text: #bdbdbd;
    --color-tertiary-text: #9e9e9e;

    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-card: #1e1e1e;
    --color-alt-surface: #2a2a2a;

    --color-marker-border: #555;
    --color-thumb-color: #e0e0e0;

    --color-tag-bg: #e0e0e0;
    --color-tag-text: #212121;
  }
}


/* =========================
   DARK MODE (MANUAL TOGGLE)
========================= */

.dark {
  --color-text: #e0e0e0;
  --color-secondary-text: #bdbdbd;
  --color-tertiary-text: #9e9e9e;

  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-card: #1e1e1e;
  --color-alt-surface: #2a2a2a;

  --color-tag-bg: #e0e0e0;
  --color-tag-text: #212121;

  --color-marker-border: #555;
  --color-thumb-color: #e0e0e0;
}


/* =========================
   RESET & GLOBAL NORMALIZATION
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  transition:
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
}

/* Prevent scrollbars from flashing before JS initializes */
.js-enabled html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.js-enabled body::-webkit-scrollbar {
  width: 0;
  height: 0;
}


/* =========================
   MEDIA & CONTENT DEFAULTS
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration-skip-ink: auto;
  transition: color var(--transition-speed) ease;
}

a:hover,
a:focus {
  text-decoration: underline;
}


/* =========================
   ACCESSIBILITY
========================= */

:focus {
  outline: 3px dashed var(--color-secondary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Prevent text selection during drag interactions */
.no-select {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Ensure sections don't hide behind sticky header */
section {
  scroll-margin-top: 80px;
}


/* =========================
   LAYOUT UTILITIES
========================= */

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}


/* =========================
   GLOBAL ANIMATIONS
========================= */

/* Hero background pan */
@keyframes heroPan {
  0%   { background-position: center top; }
  100% { background-position: center bottom; }
}

/* Scrollbar baseball rotation */
@keyframes baseball-roll {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}


/* =========================
   REVEAL ANIMATION SYSTEM
========================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================
   REDUCED MOTION SUPPORT
========================= */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}