/* Base styles - variables, fonts, resets, body */

/* LIGHT MODE (default) */
:root {
  --bg: #EEEEEE;
  --text: #1a1a19;
  --muted: #6b7280;

  --surface: #ffffff;
  --border: rgba(0, 0, 0, 0.12);

  --hero: #628141;
  --hero-hover: #6d9048;
  --hero-active: #7fa852;

  --nav-text: rgba(26, 26, 25, 0.70);
  --nav-text-hover: #1a1a19;
  --divider: rgba(26, 26, 25, 0.18);

  --card-text: #ffffff;
  --sidebar-width: 220px;
  --sidebar-offset-medium: 120px;
  --sidebar-offset-large: 120px;
}  


/* DARK MODE */
html[data-theme="dark"],
html.dark-mode {
  --bg: #292929;
  --text: #EEEEEE;
  /* WIT in dark mode */
  --muted: rgba(238, 238, 238, 0.7);

  --surface: #2f2f2f;
  --border: rgba(238, 238, 238, 0.12);

  --hero: #628141;
  --hero-hover: #6d9048;
  --hero-active: #7fa852;

  --nav-text: rgba(238, 238, 238, 0.75);
  --nav-text-hover: #EEEEEE;
  --divider: rgba(238, 238, 238, 0.18);

  --card-text: #EEEEEE;
  --sidebar-width: 220px;
  --sidebar-offset-medium: 120px;
  --sidebar-offset-large: 120px;
}  


/* Resets */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Fonts */
@font-face {
  font-family: 'Moara Demo';
  src: url('../fonts/MoaraDemo-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stack Sans Text';
  src: url('../fonts/StackSansText-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html[data-theme="dark"] #cookie-consent-popup{
  background: #292929 !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;
}

html[data-theme="dark"] #cookie-consent-popup div{
  color: #f5f5f5 !important;
}

html[data-theme="dark"] #cookie-consent-decline{
  background: rgba(255,255,255,0.12) !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] #cookie-consent-accept{
  background: #2b8fdd !important;
  color: #ffffff !important;
}

/* ==================================================================
 * DEMO BANNER & FOOTER
 * ================================================================== */

body[data-demo="1"] {
  padding-top: 36px;
  padding-bottom: 32px;
}

.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 36px;
  background: #1a1a19;
  color: #f5f5f5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 13px;
  line-height: 36px;
}

.demo-banner-left {
  white-space: nowrap;
}

.demo-banner-right {
  white-space: nowrap;
}

.demo-banner-right strong {
  font-weight: 700;
  color: #628141;
}

.demo-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 32px;
  background: #1a1a19;
  color: #f5f5f5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 12px;
  line-height: 32px;
}

.demo-footer a {
  color: #628141;
  text-decoration: none;
  margin-left: 4px;
}

.demo-footer a:hover {
  text-decoration: underline;
}

.demo-credentials {
  margin: 16px 0;
  padding: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
}

.demo-credentials h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text, #1a1a19);
}

.demo-creds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.demo-creds-table td {
  padding: 4px 8px;
  color: var(--text, #1a1a19);
}

.demo-creds-table td:first-child {
  font-weight: 600;
  width: 70px;
}

@media (max-width: 600px) {
  .demo-banner {
    flex-direction: column;
    height: auto;
    padding: 4px 12px;
    line-height: 1.4;
    text-align: center;
  }
  body {
    padding-top: 60px;
  }
}