/* * {
    outline: 0.5px solid red;
} */



/* Base Theme Variables */
:root {
  /* Backgrounds */
  --bg-color: #ffffff;
  --card-bg: #f8f8f8;

  --button-bg: #1E40AF;
  /* Text Colors */
  --text-color: #111111;
  --headline-color: #111111;
  /* Indigo-900 */
  --summary-color: #444444;
  --description-color: #222222;
  --time-color: #6b6b6b;

  /* Accent Colors */
  --link-color: #1e40af;
  /* Blue-700 */
  --border-color: #e0e0e0;

  --skeleton-base: #fff;
  --skeleton-highlight: #e7e7e7;

}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;  /* Variable axis supports all weights */
  font-stretch: 75% 100%; /* Optional: controls wdth axis if you need condensed */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}


/* Dark Theme Overrides */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-color: #121212;
  --card-bg: #202020;
  --button-bg: #1E40AF;
  /* Text Colors */
  --text-color: #e5e5e5;
  --headline-color: #eeeeee;
  /* Blue-400 */
  --summary-color: #bbbbbb;
  --description-color: #ddd;
  --time-color: #888888;

  /* Accent Colors */
  --link-color: #3a86ff;
  /* Blue-300 */
  --border-color: #2a2a2a;

  --skeleton-base: #121212;
  --skeleton-highlight: #1d1d1d;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 1rem;
  margin: 0;
  /* line-height: 1.3; */
}

/* Skeleton Loader (Light + Dark Theme) */
.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg,
      var(--skeleton-base) 25%,
      var(--skeleton-highlight) 50%,
      var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    background-position: -200% 0;
  }
}

/* Size variants */
.skeleton-header {
  width: 100%;
  height: 60px;
}

.skeleton-carousel {
  width: 100%;
  height: 47.8px;
}

.skeleton-card {
  width: 100%;
  height: 172px;
}

.skeleton-card.sm {
  height: 80px;
}

.skeleton-trending {
  width: 100%;
  height: 250px;
  margin: 1rem 0;
}

.skeleton-footer {
  width: 100%;
  height: 368px;
  margin-top: 1rem;
}

.skeleton-breadcrumb {
  width: 100%;
  height: 1000px;
}