@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* Superr Theme Light Tokens */
  --color-cream-paper: #fdfbf9;
  --color-charcoal: #171717;
  --color-cocoa-ink: #2b1a07;
  --color-true-black: #000000;
  --color-dew-drop: #f7efe9;
  --color-marker-orange: #ff6f1e;
  --color-burnt-sienna: #ce500a;
  --color-sky-sticker: #3b82f6;
  --color-bubblegum-sticker: #ff66cf;
  --color-sprout-sticker: #22c55e;
  --color-shadow-mist: #bebcbb;
  --border-color: #171717;
  --card-bg: #fdfbf9;
  --input-bg: #fdfbf9;
  --table-header-bg: #f7efe9;
  --table-row-bg: #fdfbf9;
  --table-hover: #f5ebe2;

  /* Typography */
  --font-display: 'Fraunces', 'Outfit', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Border Radii */
  --radius-cards: 12px;
  --radius-buttons: 20px;
  --radius-tags: 20px;
  --radius-inputs: 8px;
  --radius-footer: 56px;
}

/* Dark Mode Tokens (Midnight Superr Notebook) */
[data-theme="dark"] {
  --color-cream-paper: #121214;
  --color-charcoal: #f3f3f3;
  --color-cocoa-ink: #fdf8f5;
  --color-dew-drop: #1e1e24;
  --color-marker-orange: #ff6f1e;
  --color-burnt-sienna: #ff8533;
  --border-color: #383844;
  --card-bg: #18181e;
  --input-bg: #141418;
  --table-header-bg: #1c1c24;
  --table-row-bg: #18181e;
  --table-hover: #23232c;
  --color-shadow-mist: #000000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-cream-paper);
  color: var(--color-charcoal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Display & Headings */
.font-display {
  font-family: var(--font-display);
}

.heading-display {
  font-family: var(--font-display);
  color: var(--color-cocoa-ink);
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Superr Pill Button */
.btn-pill {
  background-color: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-buttons);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-charcoal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, color 0.1s ease;
  text-decoration: none;
}

.btn-pill:hover {
  background-color: var(--color-dew-drop);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-pill-orange {
  background-color: var(--color-marker-orange);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-buttons);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
  text-decoration: none;
}

.btn-pill-orange:hover {
  background-color: var(--color-burnt-sienna);
  transform: translateY(-1px);
}

.btn-pill-active {
  background-color: var(--color-charcoal) !important;
  color: var(--color-cream-paper) !important;
  border-color: var(--border-color) !important;
}

/* Superr Cards */
.superr-card {
  background-color: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-cards);
  box-shadow: 0 2px 0px var(--border-color);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.superr-card-tint {
  background-color: var(--color-dew-drop);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-cards);
  box-shadow: 0 2px 0px var(--border-color);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Name Tag / Sticker */
.name-tag {
  background-color: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-charcoal);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Inputs & Form Controls */
input[type="text"], input[type="number"], input[type="tel"], textarea, select {
  background-color: var(--input-bg) !important;
  color: var(--color-charcoal) !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: var(--radius-inputs);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-marker-orange) !important;
  outline: none;
}

/* Marker Highlight */
.marker-highlight {
  color: var(--color-marker-orange);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

/* CBC Level Badges */
.badge-ee {
  background-color: #f0fdf4;
  color: #166534;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-tags);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-me {
  background-color: #eff6ff;
  color: #1e40af;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-tags);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-ae {
  background-color: #fffbeb;
  color: #92400e;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-tags);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-be {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-tags);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-theme="dark"] .badge-ee {
  background-color: #052e16;
  color: #4ade80;
}

[data-theme="dark"] .badge-me {
  background-color: #172554;
  color: #60a5fa;
}

[data-theme="dark"] .badge-ae {
  background-color: #451a03;
  color: #fcd34d;
}

[data-theme="dark"] .badge-be {
  background-color: #450a0a;
  color: #f87171;
}

/* Status Badges */
.badge-cleared {
  background-color: #f0fdf4;
  color: #166534;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-tags);
}

.badge-partial {
  background-color: #fff7ed;
  color: #c2410c;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-tags);
}

.badge-unpaid {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-tags);
}

[data-theme="dark"] .badge-cleared {
  background-color: #052e16;
  color: #4ade80;
}

[data-theme="dark"] .badge-partial {
  background-color: #431407;
  color: #fb923c;
}

[data-theme="dark"] .badge-unpaid {
  background-color: #450a0a;
  color: #f87171;
}

/* Footer Brand Band */
.footer-band {
  background-color: var(--color-marker-orange);
  border-top-left-radius: var(--radius-footer);
  border-top-right-radius: var(--radius-footer);
  border: 1.5px solid var(--border-color);
  border-bottom: none;
}

/* Tables */
table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Print Optimization */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print {
    display: none !important;
  }
  .report-page {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
  }
}