/* Custom color overrides for Sarah Bradley's Digital Garden - Light/Dark Mode */

/* Import Libre Baskerville font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* Theme variables */
:root {
  /* Light */
  --header-bg-light: #F5EADB;
  --header-text-light: #4A4A4A;
  --text-light: #636363;
  --background-light: #FFFFFF;

  /* Dark */
  --header-bg-dark: #DBE6F5;
  --background-dark: #011D3F;
  --text-dark: #FFFFFF;

  /* Defaults (light) */
  --header-bg: var(--header-bg-light);
  --header-text: var(--header-text-light);
  --text-color: var(--text-light);
  --background: var(--background-light);
  --link-color: #0066cc;
  --link-hover: #004499;
  --tag-bg: #e9ecef;
  --tag-text: #333333;
  --code-bg: #f8f9fa;
  --border-color: #dee2e6;

  /* Reading tracker variables */
  --bg-color: var(--background);
  --card-bg: var(--background);
  --primary-color: #4f46e5;
  --primary-dark: #3730a3;
  --secondary-color: #6b7280;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --border-radius: 8px;
  --transition: all 0.2s ease;
}

[data-theme="light"] {
  --header-bg: var(--header-bg-light);
  --header-text: var(--header-text-light);
  --text-color: var(--text-light);
  --background: var(--background-light);
  --link-color: #0066cc;
  --link-hover: #004499;
  --tag-bg: #F5EADB;
  --tag-text: #4A4A4A;
  --code-bg: #f8f9fa;
  --border-color: #dee2e6;

  /* Featured badge */
  --featured-badge-bg: #F5EADB;
  --featured-badge-text: #636363;
}

[data-theme="dark"] {
  --header-bg: var(--header-bg-dark);
  --header-text: var(--header-text-light);
  --text-color: var(--text-dark);
  --background: var(--background-dark);
  --link-color: #87ceeb;
  --link-hover: #ffffff;
  --tag-bg: #DBE6F5;
  --tag-text: #4A4A4A;
  --code-bg: #1a1a3a;
  --border-color: #4a5568;

  /* Featured badge (dark mode) */
  --featured-badge-bg: #DBE6F5;
  --featured-badge-text: #636363;

  /* Reading tracker variables for dark theme */
  --bg-color: var(--background);
  --card-bg: var(--background);
  --primary-color: #4f46e5;
  --primary-dark: #3730a3;
  --secondary-color: #6b7280;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --border-radius: 8px;
  --transition: all 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --header-bg: var(--header-bg-dark);
    --header-text: var(--header-text-light);
    --text-color: var(--text-dark);
    --background: var(--background-dark);
    --link-color: #87ceeb;
    --link-hover: #ffffff;
    --tag-bg: #DBE6F5;
    --tag-text: #4A4A4A;
    --code-bg: #1a1a3a;
    --border-color: #4a5568;

    /* Featured badge (prefers-color-scheme dark) */
    --featured-badge-bg: #DBE6F5;
    --featured-badge-text: #636363;

    /* Reading tracker variables for prefers-color-scheme dark */
    --bg-color: var(--background);
    --card-bg: var(--background);
    --primary-color: #4f46e5;
    --primary-dark: #3730a3;
    --secondary-color: #6b7280;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --border-radius: 8px;
    --transition: all 0.2s ease;
  }
}

/* Base typography */
body {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  background-color: var(--background);
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6,
p, li, blockquote,
.Heading-title {
  color: var(--text-color) !important;
  transition: color 0.3s ease;
}

/* Links */
a { color: var(--link-color) !important; transition: color 0.2s ease; }
a:hover { color: var(--link-hover) !important; text-decoration: underline !important; }

/* Header / Banner */
.u-background, .Banner { background-color: var(--header-bg) !important; transition: background-color 0.3s ease; }
.Banner-link { color: var(--header-text) !important; font-weight: 500; }

/* Home FEATURED badge (scoped to home page only) */
.home-featured-badge {
  background: var(--featured-badge-bg) !important;
  color: var(--featured-badge-text) !important;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
}

/* Footer */
.Footer {
  background-color: var(--header-bg) !important;
  color: var(--header-text) !important;
  border-top: 1px solid var(--border-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tags */
.Tags-link {
  color: var(--tag-text) !important;
  background-color: var(--tag-bg) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.Tags-link:hover { background-color: var(--border-color) !important; }

/* Code */
pre, code {
  background-color: var(--code-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--border-color) !important;
  background-color: var(--tag-bg) !important;
  color: var(--text-color) !important;
  padding: 1rem;
  margin: 1rem 0;
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--header-bg);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--header-text);
  transition: all 0.2s ease;
}
.theme-toggle:hover { transform: scale(1.05); }