/* Design tokens for Karamel Web - base and dark overrides
   Generated from STYLING_GUIDE.md recommendations.
   Keep tokens semantic and minimal to start; components will reference these.
*/

:root {
  /* Colors (updated from STYLING_GUIDE.md) */
  --gradient-light-from: #C84A46; /* Further-dimmed red (light mode) */
  --gradient-light-to: #D89A62;   /* Slightly darker caramel (light mode) */
  --gradient-dark-from: #8B1B1B;  /* Warmer rich red (dark mode, shifted toward warm red) */
  --gradient-dark-to: #0F0C0B;    /* Near-black for deeper contrast in dark mode */

  --color-primary: #EAAE63; /* Button primary light */
  --color-primary-dark: #CB8F53; /* Button primary dark */
  --color-accent: #C95CA2; /* Links / Accent (light) */
  --color-accent-dark: #FF93CE; /* Links / Accent (dark) */
  --color-surface: linear-gradient(35deg, #FBE7D0, #F6C895); /* surface-light gradient */
  --color-surface-dark: linear-gradient(35deg, #5A2E22, #7A4A36); /* richer surface-dark gradient */
  --color-surface-contrast: #ffffff;
  --color-surface-contrast-rgb: 255,255,255;
  --color-bg: var(--gradient-light-from); /* fallback base, used with gradient variables */
  --color-text: #3C2415; /* Primary text (light) */
  --color-text-border: var(--color-text);
  --color-text-rgb: 60,36,21;
  --color-text-dark: #F5E1C0; /* Primary text (dark) */
  --color-text-secondary: #6B4B2B; /* Secondary text (light) */
  --color-text-secondary-dark: #D6BFA5; /* Secondary text (dark) */
  --color-highlight: #FFD25F; /* Light highlight (Highlight Glow from style guide) */
  --color-highlight-dark: #FFC254; /* Dark highlight (Highlight Glow from style guide) */
  --color-checkbox-checked: var(--gradient-light-from); 
  --color-checkbox-checked-dark: var(--gradient-dark-from);
  --color-success: #63B767;
  --color-error: #C76C6C;

  /* Typography */
  --font-sans: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Baloo", var(--font-sans);
  --text-base: 1rem; /* 16px */
  --text-small: 0.875rem; /* 14px */

  /* Spacing */
  --space-1: 0.5rem; /* 8px */
  --space-2: 1rem;   /* 16px */
  --space-3: 1.5rem; /* 24px */

  /* Elevation / radius */
  --radius-sm: 8px;
  --radius-md: 16px;

  /* Misc */
  --focus-ring: 2px solid var(--color-highlight);

  /* Bootstrap variable mappings (so Bootstrap components inherit our theme) */
  --gradient-light: linear-gradient(35deg, var(--gradient-light-from), var(--gradient-light-to));
  --gradient-dark: linear-gradient(35deg, var(--gradient-dark-from), var(--gradient-dark-to));

  --bs-body-bg: var(--gradient-light);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-primary);
  --bs-primary-text: var(--color-text);
  --bs-accent: var(--color-accent);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-error);
  --bs-link-color: var(--color-accent);
  --bs-card-bg: var(--color-surface);
  --bs-border-color: rgba(0,0,0,0.08);
}

/* Dark mode: both system preference and explicit data-theme toggle supported */
@media (prefers-color-scheme: dark) {
  body::before {
    background: var(--gradient-dark);
  }

  :root {
    --gradient-light: linear-gradient(35deg, var(--gradient-light-from), var(--gradient-light-to));
    --gradient-dark: linear-gradient(35deg, var(--gradient-dark-from), var(--gradient-dark-to));

    --color-primary: #CB8F53;
    --color-primary-dark: #8B5A2B;
    --color-accent: #FF93CE;
    --color-surface: var(--color-surface-dark);
    --color-surface-contrast: #2e231d;
    --color-surface-contrast-rgb: 46,35,29;
    --color-bg: var(--gradient-dark);
    --color-text: #F5E1C0;
    --color-text-border: var(--color-text);
    --color-text-rgb: 245,225,192;
    --color-text-secondary: #D6BFA5;
    --color-highlight: #FFC254;
    --color-checkbox-checked: #FFB64C;

    /* Bootstrap dark mappings */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-primary: var(--color-primary);
    --bs-primary-text: var(--color-text);
    --bs-accent: var(--color-accent);
    --bs-success: var(--color-success);
    --bs-danger: var(--color-error);
    --bs-link-color: var(--color-accent);
    --bs-card-bg: var(--color-surface);
    --bs-border-color: rgba(255,255,255,0.06);
  }
}

/* Explicit dark theme via attribute (allows toggle) */
:root[data-theme="dark"] body::before {
  background: var(--gradient-dark);
}

:root[data-theme="dark"] {
  --gradient-light: linear-gradient(35deg, var(--gradient-light-from), var(--gradient-light-to));
  --gradient-dark: linear-gradient(35deg, var(--gradient-dark-from), var(--gradient-dark-to));

  --color-primary: #CB8F53;
  --color-primary-dark: #8B5A2B;
  --color-accent: #FF93CE;
  --color-surface: var(--color-surface-dark);
  --color-surface-contrast: #2e231d;
  --color-bg: var(--gradient-dark);
  --color-text: #F5E1C0;
  --color-text-border: var(--color-text);
  --color-text-rgb: 245,225,192;
  --color-text-secondary: #D6BFA5;
  --color-highlight: #FFC254;
  --color-checkbox-checked: #FFB64C;

  /* Bootstrap dark mappings */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-primary);
  --bs-primary-text: var(--color-text);
  --bs-accent: var(--color-accent);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-error);
  --bs-link-color: var(--color-accent);
  --bs-card-bg: var(--color-surface);
  --bs-border-color: rgba(255,255,255,0.06);
}

/* Explicit light theme via attribute – overrides OS-level dark preference when
   the user selects light from session controls (data-theme="light" set by setTheme). */
:root[data-theme="light"] {
  --gradient-light: linear-gradient(35deg, var(--gradient-light-from), var(--gradient-light-to));
  --gradient-dark: linear-gradient(35deg, var(--gradient-dark-from), var(--gradient-dark-to));

  --color-primary: #EAAE63;
  --color-primary-dark: #CB8F53;
  --color-accent: #C95CA2;
  --color-surface: linear-gradient(35deg, #FBE7D0, #F6C895);
  --color-surface-contrast: #ffffff;
  --color-surface-contrast-rgb: 255,255,255;
  --color-bg: var(--gradient-light);
  --color-text: #F5E1C0;
  --color-text-border: var(--color-text);
  --color-text-rgb: 245,225,192;
  --color-text-secondary: #D6BFA5;
  --color-highlight: #FFD25F;
  --color-checkbox-checked: var(--gradient-light-from);

  /* Bootstrap light mappings */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-primary);
  --bs-primary-text: var(--color-text);
  --bs-accent: var(--color-accent);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-error);
  --bs-link-color: var(--color-accent);
  --bs-card-bg: var(--color-surface);
  --bs-border-color: rgba(0,0,0,0.08);
}

/* Bootstrap dropdown-menu cannot use a gradient via --bs-dropdown-bg (background-color only).
   Override directly so light-theme dropdowns use the light gradient instead of white. */
html[data-theme="light"] .dropdown-menu {
  background: var(--gradient-light) !important;
}

/* Utility: ensure color scheme declared for form controls */
html {
  color-scheme: light dark;
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* Viewport-pinned background gradient via a fixed pseudo-element.
   This approach is immune to document height, content count, and Bootstrap body resets.
   The gradient always covers exactly the viewport, regardless of scroll position. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-light);
  z-index: -1;
  pointer-events: none;
}

.k-btn-primary {
  background: var(--color-primary);
  color: var(--color-text);
  border-radius: 10px;
}

.k-btn-outline {
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  background: transparent !important;
  border-radius: 10px;
}

.k-btn-success {
  background: var(--color-success) !important;
  color: var(--color-text) !important;
  border-radius: 10px;
}

.k-btn-success-outline {
  color: var(--color-success) !important;
  border: 1px solid var(--color-success) !important;
  background: transparent !important;
  border-radius: 10px;
}

.k-btn-outline-secondary {
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  background: transparent !important;
  border-radius: 10px;
}

/* Ensure common Bootstrap utility classes used in Home reflect our tokens
   and update instantly when `data-theme` changes on the root element. */
.card {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.card-header.bg-primary,
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-text) !important;
}



.btn-outline-secondary {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: rgba(0,0,0,0.04);
}

/* Explicit themeed overrides with high specificity to beat compiled component CSS */
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .container-fluid {
  background: var(--gradient-dark) !important;
  color: var(--color-text) !important;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .card-body,
html:not([data-theme="dark"]) .card-header,
html:not([data-theme="dark"]) .btn,
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .btn-outline-secondary,
html:not([data-theme="dark"]) .container-fluid {
  background: var(--gradient-light) !important;
  color: var(--color-text) !important;
}

/* Ensure headers using bg-primary are themed */
html[data-theme="dark"] .card-header.bg-primary,
html:not([data-theme="dark"]) .card-header.bg-primary {
  background: var(--color-primary) !important;
  color: var(--color-text) !important;
}

/* Override explicit white text utility when used on themed headers */
html[data-theme="dark"] .card-header.bg-primary.text-white,
html:not([data-theme="dark"]) .card-header.bg-primary.text-white {
  color: var(--color-text) !important;
}

/* If any elements use .text-white but are inside our card/header, override to our text token */
html[data-theme="dark"] .card .text-white,
html:not([data-theme="dark"]) .card .text-white {
  color: var(--color-text) !important;
}

/* Semantic helpers for content to avoid relying on Bootstrap utility colors */
.text-on-surface {
  color: var(--color-text) !important;
}

.muted-on-surface {
  color: var(--color-text-secondary) !important;
}

.card-header-title {
  color: var(--color-text) !important;
  font-weight: 600;
}

.form-text-muted {
  color: var(--color-text-secondary) !important;
}

/* Toast helpers: semantic background + readable text */
.toast-success {
  background-color: var(--color-success) !important;
  color: var(--color-text) !important;
}

.toast-primary {
  background: black !important;
  color: var(--color-text) !important;
}

.toast-error {
  background-color: var(--color-error) !important;
  color: var(--color-text) !important;
}

/* Semantic destructive button to avoid direct reliance on Bootstrap's .btn-danger
   Uses tokenized error color so it adapts to light/dark themes. */
.btn-destructive {
  --bs-btn-bg: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: var(--color-text) !important;
}

/* Outline variant for destructive actions */
.btn-destructive-outline {
  color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  background-color: transparent !important;
}

/* Use color-text for form control borders and checkbox outlines so theme text color drives accents */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-control {
  border: 1px solid var(--color-text-border) !important;
  color: var(--color-text) !important;
}

/* Bootstrap form-check-input uses --bs-border-color; ensure it maps to our token for consistent checkbox borders */
.form-check-input {
  border: 1px solid var(--color-text-border) !important;
  background-color: transparent !important;
}

.form-check-input:focus,
.form-check-input:active,
input:focus,
textarea:focus,
.form-control:focus {
  box-shadow: 0 0 0 2px var(--color-highlight);
  border-color: var(--color-text-border) !important;
}

/* Ensure checked/indeterminate states use correct background for theme */
.form-check-input:checked,
.form-check-input:indeterminate {
  border-color: var(--color-checkbox-checked) !important;
  color: var(--color-checkbox-checked) !important;
}