/**
 * SaaS Factory CookieConsent v3 Design System Theme
 *
 * Provides production-grade styling adhering to SaaS Factory design tokens:
 * - Alabaster / Quartz light mode tokens
 * - Slate 950 / Emerald dark mode tokens
 * - Daylight diffuse elevation shadows
 * - Strict Rule 32 compliance (Clean vector SVGs, ZERO emojis)
 * - Strict Rule 38 compliance (Canonical responsive grid margins)
 */

/* -------------------------------------------------------------------------- */
/* 1. Base Variables (Light Mode Defaults: Alabaster / Quartz)                */
/* -------------------------------------------------------------------------- */
:root {
  --cc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cc-modal-border-radius: 14px;
  --cc-btn-border-radius: 8px;
  --cc-modal-transition-duration: 0.22s;
  --cc-modal-margin: 1.5rem;
  --cc-z-index: 2147483640;

  /* Surfaces & Text */
  --cc-bg: #ffffff;
  --cc-primary-color: #0f172a;       /* slate-900 */
  --cc-secondary-color: #475569;     /* slate-600 */
  --cc-separator-border-color: #f1f5f9; /* slate-100 */

  /* Buttons */
  --cc-btn-primary-bg: #0f172a;      /* slate-900 */
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #0f172a;
  --cc-btn-primary-hover-bg: #1e293b; /* slate-800 */
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #1e293b;

  --cc-btn-secondary-bg: #f8fafc;    /* slate-50 */
  --cc-btn-secondary-color: #0f172a;
  --cc-btn-secondary-border-color: #e2e8f0; /* slate-200 */
  --cc-btn-secondary-hover-bg: #f1f5f9;     /* slate-100 */
  --cc-btn-secondary-hover-color: #0f172a;
  --cc-btn-secondary-hover-border-color: #cbd5e1; /* slate-300 */

  --cc-link-color: #2563eb;          /* blue-600 */

  /* Toggles & Preferences */
  --cc-toggle-on-bg: #10b981;        /* emerald-500 */
  --cc-toggle-off-bg: #cbd5e1;       /* slate-300 */
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-enabled-icon-color: #10b981;
  --cc-toggle-disabled-icon-color: #94a3b8;
  --cc-toggle-readonly-bg: #e2e8f0;
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-icon-color: #94a3b8;

  /* Category Cards in Preferences Modal */
  --cc-cookie-category-block-bg: #f8fafc;
  --cc-cookie-category-block-border: #e2e8f0;
  --cc-cookie-category-block-hover-bg: #f1f5f9;
  --cc-cookie-category-block-hover-border: #cbd5e1;
  --cc-cookie-category-expanded-block-bg: #ffffff;
  --cc-cookie-category-expanded-block-hover-bg: #f8fafc;

  /* Modal Overlay */
  --cc-overlay-bg: rgba(15, 23, 42, 0.45);

  /* Footer */
  --cc-footer-bg: #f8fafc;
  --cc-footer-color: #64748b;
  --cc-footer-border-color: #e2e8f0;
}

/* -------------------------------------------------------------------------- */
/* 2. Dark Mode Overrides (Slate 950 / Emerald Accents)                       */
/* -------------------------------------------------------------------------- */
html.dark,
html[data-theme="dark"],
html.bg-slate-950,
.cc--darkmode {
  --cc-bg: #090d16;
  --cc-primary-color: #f8fafc;       /* slate-50 */
  --cc-secondary-color: #94a3b8;     /* slate-400 */
  --cc-separator-border-color: #1e293b; /* slate-800 */

  /* Primary Button: Emerald Accent */
  --cc-btn-primary-bg: #10b981;      /* emerald-500 */
  --cc-btn-primary-color: #020617;   /* slate-950 */
  --cc-btn-primary-border-color: #10b981;
  --cc-btn-primary-hover-bg: #059669; /* emerald-600 */
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #059669;

  /* Secondary Button: Slate Outline */
  --cc-btn-secondary-bg: #1e293b;    /* slate-800 */
  --cc-btn-secondary-color: #f8fafc;
  --cc-btn-secondary-border-color: #334155; /* slate-700 */
  --cc-btn-secondary-hover-bg: #334155;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #475569;

  --cc-link-color: #38bdf8;          /* sky-400 */

  /* Toggles */
  --cc-toggle-on-bg: #10b981;
  --cc-toggle-off-bg: #475569;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #94a3b8;
  --cc-toggle-readonly-bg: #334155;
  --cc-toggle-readonly-knob-bg: #64748b;

  /* Category Cards */
  --cc-cookie-category-block-bg: #0e1524;
  --cc-cookie-category-block-border: #1e293b;
  --cc-cookie-category-block-hover-bg: #141c2e;
  --cc-cookie-category-block-hover-border: #334155;
  --cc-cookie-category-expanded-block-bg: #090d16;
  --cc-cookie-category-expanded-block-hover-bg: #0e1524;

  /* Modal Overlay */
  --cc-overlay-bg: rgba(2, 6, 23, 0.75);

  /* Footer */
  --cc-footer-bg: #070a12;
  --cc-footer-color: #94a3b8;
  --cc-footer-border-color: #1e293b;
}

/* -------------------------------------------------------------------------- */
/* 3. Modal Structural Refinements & Daylight Diffuse Elevation              */
/* -------------------------------------------------------------------------- */
#cc-main .cm {
  border: 1px solid var(--cc-separator-border-color);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.18), 0 8px 16px -6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cc--darkmode #cc-main .cm,
html.dark #cc-main .cm {
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#cc-main .pm {
  border: 1px solid var(--cc-separator-border-color);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cc-primary-color);
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  line-height: 1.55;
  color: var(--cc-secondary-color);
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

#cc-main .pm__badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Category card spacing */
#cc-main .pm__section--toggle .pm__section-title {
  padding: 0.9em 4.8em 0.9em 1.1em;
}

/* -------------------------------------------------------------------------- */
/* 4. Responsive Viewport Adjustments (Rule 38 Alignment)                    */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  #cc-main {
    --cc-modal-margin: 0.75rem;
  }
  #cc-main .cm {
    border-radius: 16px;
    margin: 0.5rem;
  }
  #cc-main .pm {
    border-radius: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* 5. Cookie Preferences Trigger Link / Button Helper Styles                 */
/* -------------------------------------------------------------------------- */
.cc-preferences-btn,
button[data-cc="show-preferencesModal"] {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.cc-preferences-btn:hover,
button[data-cc="show-preferencesModal"]:hover {
  opacity: 0.8;
}