/* ─── Veda Guru Design Tokens ─── */
/* Global Source of Truth — matches existing values across all pages. */
/* Import this BEFORE other stylesheets: <link rel="stylesheet" href="design-tokens.css" /> */

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

:root {
  /* Brand */
  --accent: #FF9933;
  --accent-dark: #E08500;
  --accent-light: #FFCC80;
  --accent-bg: rgba(255, 153, 51, 0.08);
  --gold: #FF9933;

  /* Text */
  --text: #2C2C2C;
  --text-dim: #6B4630;
  --text-muted: #7A6848;
  --brown: #2C2C2C;
  --brown-light: #6B4630;
  --brown-muted: #7A6848;
  --deep-red: #6B4630;

  /* Surfaces */
  --cream: #F8F5EF;
  --cream-dark: #EDE3D0;
  --bg: #F8F5EF;
  --surface: #FFFFFF;
  --white: #FFFFFF;

  /* Borders */
  --border: rgba(255,153,51,0.15);
  --border-gold: rgba(212,175,55,0.15);

  /* Borders for light/dark */
  --gray: #757575;
  --gray-light: #B0A88E;
  --gray-bg: #EDE3D0;

  /* Semantic */
  --green: #27AE60;
  --amber: #F39C12;
  --red: #E74C3C;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(44, 44, 44, 0.06);
  --shadow: 0 2px 12px rgba(44, 44, 44, 0.08);
  --shadow-lg: 0 8px 30px rgba(44, 44, 44, 0.12);

  /* Radii */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-xl: 20px;
  --radius-full: 50px;

  /* Sizing */
  --max-width: 960px;
  --max-width-wide: 1100px;
  --header-height: 56px;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "Georgia", serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* Transitions */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;

  /* Spacing (shell + pages) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* ─── Shared Utility Classes ─── */

/* Focus ring */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbar (shared) */
.thin-scroll::-webkit-scrollbar {
  width: 5px;
}
.thin-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.thin-scroll::-webkit-scrollbar-thumb {
  background: var(--cream-dark);
  border-radius: 3px;
}

/* ─── Shared Component Styles ─── */

/* Site Footer */
.site-footer {
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  color: #8A7350;
  background: var(--cream);
  border-top: 1px solid rgba(255,153,51,0.12);
}
.site-footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.site-footer a {
  color: #A06020;
  text-decoration: none;
  transition: color var(--transition-base);
  position: relative;
}
.site-footer a:hover {
  color: #CC6600;
}
.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #CC6600;
  transform: scaleX(0);
  transition: transform var(--transition-base);
}
.site-footer a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 480px) {
  .site-footer {
    padding: 1rem 0.8rem 1rem;
    font-size: 0.7rem;
  }
  .site-footer .footer-links {
    gap: 0.6rem;
  }
}

/* Beta Badge */
.beta-badge {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: 50px;
  background: rgba(212, 175, 55, 0.2);
  color: #FF9933;
  border: 1px solid rgba(212, 175, 55, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 0.25em;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--brown);
  color: var(--white);
  padding: 0.5em 1.2em;
  border-radius: 8px;
  font-size: 0.82em;
  opacity: 0;
  transition: all var(--transition-slow);
  z-index: 100;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}