/* ==========================================================================
   SIMPLIFIED STYLE CONFIG - Uproszczona konfiguracja stylów
   ========================================================================== */

:root {
  /* ==========================================================================
     FONTS - Fonty
     ========================================================================== */

  --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: var(--font-primary);
  --font-heading: 'Lato', var(--font-primary);
  --font-body: 'Lato', var(--font-primary);
  --font-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", monospace;

  /* ==========================================================================
     MAIN COLORS - Główne kolory
     ========================================================================== */

  /* Primary & Secondary — TropKamyka warm beige / stone (dark) */
  --color-primary: #c4a574;
  --color-primary-rgb: 196, 165, 116;
  --color-primary-hover: #d4bc93;
  --color-secondary: #a89070;
  --color-secondary-hover: #c4a574;

  /* Text Colors */
  --color-text: #f0e9df;
  --color-text-light: #a89f90;
  --color-text-white: #ffffff;

  /* Background Colors — warm dark beige / brown */
  --color-bg: #221e18;
  --color-bg-light: #2e2820;
  --color-bg-dark: #18150f;

  /* ==========================================================================
     SECTIONS - Sekcje strony
     ========================================================================== */

  /* Header */
  --header-bg: #2e2820;
  --header-bg-transparent: rgba(46, 40, 32, 0);
  --header-bg-semi: rgba(46, 40, 32, 0.96);
  --header-text: #f0e9df;
  --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);

  /* Footer */
  --footer-bg: #2e2820;
  --footer-text: #ffffff;
  --footer-text-muted: #a89f90;

  /* Hero Sections */
  --hero-bg: url('/assets/images/article-bg.jpg') no-repeat top center/cover;
  --hero-overlay: rgba(28, 25, 21, 0.78);
  --hero-text: #ffffff;

  /* Content Areas */
  --content-bg: #221e18;
  --content-text: #f0e9df;

  /* Cards */
  --card-bg: #2e2820;
  --card-border: #4a4034;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  --card-shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.35);

  /* Forms */
  --form-bg: #2e2820;
  --form-input-bg: rgba(255, 255, 255, 0.05);
  --form-input-border: rgba(240, 233, 223, 0.18);
  --form-input-focus: #c4a574;
  --form-input-text: #f0e9df;

  /* ==========================================================================
     STATUS COLORS - Kolory statusów (opcjonalne)
     ========================================================================== */

  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-info-rgb: 23, 162, 184;

  /* ==========================================================================
     BASIC SPACING & SIZING - Podstawowe rozmiary
     ========================================================================== */

  /* Basic spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Border radius */
  --radius: 4px;
  --radius-lg: 8px;

  /* Transitions */
  --transition: all 0.3s ease;

  /* Theme Aliases (Legacy/Consistency) */
  --bg-secondary: var(--card-bg);
  --bg-muted: var(--color-bg-dark);
  --border-light: var(--card-border);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-light);
}

/* IMPORTANT: Dark mode is default, so :root uses dark colors above */

/* ==========================================================================
   LIGHT MODE OVERRIDES - Nadpisania dla trybu jasnego
   ========================================================================== */

html[data-color-scheme="light"],
:root[data-color-scheme="light"] {
  /* Text Colors — warm beige light */
  --color-text: #2c2419;
  --color-text-light: #6e6356;
  --color-text-white: #ffffff;

  /* Background Colors */
  --color-bg: #f3eee6;
  --color-bg-light: #faf6f0;
  --color-bg-dark: #ebe4d8;

  /* Primary & Secondary — warm stone / sand */
  --color-primary: #8b6f47;
  --color-primary-rgb: 139, 111, 71;
  --color-primary-hover: #6f5738;
  --color-secondary: #a89070;
  --color-secondary-hover: #c4a574;

  /* Header */
  --header-bg: #faf6f0;
  --header-bg-transparent: rgba(250, 246, 240, 0);
  --header-bg-semi: rgba(250, 246, 240, 0.94);
  --header-text: #2c2419;
  --header-shadow: 0 2px 4px rgba(44, 36, 25, 0.06);

  /* Footer */
  --footer-bg: #ebe4d8;
  --footer-text: #2c2419;
  --footer-text-muted: #6e6356;

  /* Content Areas */
  --content-bg: #f3eee6;
  --content-text: #2c2419;

  /* Cards */
  --card-bg: #fffcf7;
  --card-border: #e0d6c8;
  --card-shadow: 0 4px 6px rgba(44, 36, 25, 0.04);
  --card-shadow-hover: 0 8px 15px rgba(44, 36, 25, 0.08);

  /* Forms */
  --form-bg: #fffcf7;
  --form-input-bg: #fffcf7;
  --form-input-border: #e0d6c8;
  --form-input-focus: var(--color-primary);
  --form-input-text: #2c2419;
  
  /* Hero Sections - light mode */
  --hero-bg: url('/assets/images/article-bg.jpg') no-repeat top center/cover;
  --hero-overlay: rgba(243, 238, 230, 0.72);
  --hero-text: #2c2419;

  /* Status colors */
  --color-success: #6b8f71;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Theme Aliases */
  --bg-secondary: var(--card-bg);
  --bg-muted: #ebe4d8;
  --border-light: var(--card-border);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-light);
}

/* ==========================================================================
   UTILITY CLASSES - Podstawowe klasy
   ========================================================================== */

/* Ensure body and html always use color scheme variables */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

html {
  background-color: var(--color-bg);
}

/* Font utilities */
.font-primary {
  font-family: var(--font-primary);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Color utilities */
.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-text {
  color: var(--color-text);
}

.color-text-light {
  color: var(--color-text-light);
}

.color-text-white {
  color: var(--color-text-white);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-light {
  background-color: var(--color-bg-light);
}

.bg-dark {
  background-color: var(--color-bg-dark);
}

/* Section utilities */
.bg-header {
  background-color: var(--header-bg);
  color: var(--header-text);
  box-shadow: var(--header-shadow);
}

.bg-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

.bg-hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
}

.bg-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hero-overlay);
  z-index: 1;
}

.bg-hero>* {
  position: relative;
  z-index: 2;
}

.bg-content {
  background-color: var(--content-bg);
  color: var(--content-text);
}

.bg-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.bg-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.bg-form {
  background-color: var(--form-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* Spacing utilities */
.p-sm {
  padding: var(--space-sm);
}

.p-md {
  padding: var(--space-md);
}

.p-lg {
  padding: var(--space-lg);
}

.p-xl {
  padding: var(--space-xl);
}

.m-sm {
  margin: var(--space-sm);
}

.m-md {
  margin: var(--space-md);
}

.m-lg {
  margin: var(--space-lg);
}

.m-xl {
   margin: var(--space-xl);
}

/* ==========================================================================
   FIXED THEME SECTION - Sekcje niezależne od motywu
   ========================================================================== */

/* Footer - ALWAYS DARK MODE */
:root {
   --footer-fixed-bg: #2c3e50;
   --footer-fixed-text: #ffffff;
   --footer-fixed-text-muted: #bdc3c7;
   --footer-fixed-border: rgba(255, 255, 255, 0.1);
}

/* Cookie Banner & Settings - ALWAYS LIGHT MODE */
:root {
   --cookie-fixed-bg: #ffffff;
   --cookie-fixed-bg-light: #f8f9fa;
   --cookie-fixed-text: #2c3e50;
   --cookie-fixed-text-muted: #555555;
   --cookie-fixed-text-secondary: #7a8a99;
   --cookie-fixed-border: #d9dfe6;
}

/* ==========================================================================
   FORM & COMPONENT OVERRIDES FOR BETTER CONTRAST
   ========================================================================== */

/* High contrast form description text for both light and dark mode */
.form-text {
  color: var(--color-text-light) !important;
}

/* Premium outline secondary buttons for dark mode */
html[data-color-scheme="dark"] .btn-outline-secondary,
[data-color-scheme="dark"] .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #e2e8f0 !important;
  background-color: transparent !important;
  transition: var(--transition) !important;
}

html[data-color-scheme="dark"] .btn-outline-secondary:hover,
html[data-color-scheme="dark"] .btn-outline-secondary:focus,
html[data-color-scheme="dark"] .btn-outline-secondary:active,
[data-color-scheme="dark"] .btn-outline-secondary:hover,
[data-color-scheme="dark"] .btn-outline-secondary:focus,
[data-color-scheme="dark"] .btn-outline-secondary:active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   BREADCRUMBS — archiwum newslettera i strony publiczne (layouts.app)
   ========================================================================== */

.breadcrumb,
.breadcrumb-nav .breadcrumb {
  --bs-breadcrumb-divider-color: var(--color-text-light);
  --bs-breadcrumb-item-active-color: var(--color-text);
  background: transparent;
  margin-bottom: 0;
}

.breadcrumb .breadcrumb-item,
.breadcrumb-nav .breadcrumb-item {
  color: var(--color-text-light);
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-light);
  opacity: 0.9;
}

.breadcrumb .breadcrumb-item a,
.breadcrumb-nav .breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb .breadcrumb-item a:hover,
.breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.breadcrumb .breadcrumb-item.active,
.breadcrumb-nav .breadcrumb-item.active {
  color: var(--color-text);
}

html[data-color-scheme="dark"] .breadcrumb .breadcrumb-item a,
html[data-color-scheme="dark"] .breadcrumb-nav .breadcrumb-item a,
[data-color-scheme="dark"] .breadcrumb .breadcrumb-item a,
[data-color-scheme="dark"] .breadcrumb-nav .breadcrumb-item a {
  color: var(--color-secondary);
}

html[data-color-scheme="dark"] .breadcrumb .breadcrumb-item a:hover,
html[data-color-scheme="dark"] .breadcrumb-nav .breadcrumb-item a:hover,
[data-color-scheme="dark"] .breadcrumb .breadcrumb-item a:hover,
[data-color-scheme="dark"] .breadcrumb-nav .breadcrumb-item a:hover {
  color: #e9d5ff;
}

/* ==========================================================================
   NEWSLETTER ARCHIVE — karty i CTA (bez bg-light w trybie ciemnym)
   ========================================================================== */

.card-footer {
  background-color: var(--color-bg-light) !important;
  border-top-color: var(--card-border) !important;
  color: var(--color-text) !important;
}

.newsletter-archive-cta {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
}

.newsletter-archive-cta h4,
.newsletter-archive-cta h5 {
  color: var(--color-text);
}

.newsletter-archive-cta .text-muted,
.newsletter-archive-cta p.text-muted {
  color: var(--color-text-light) !important;
}