/* ═══════════════════════════════════════════════════════════════
   MD2 Ops Hub — Shared Design System
   All modules import this file. Change tokens here = change everywhere.
   Daub theme integration: tokens bridge to --db-* vars when Daub is loaded.
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens (bridged to Daub theme vars) ── */
:root {
  /* Backgrounds — fall back to original values when Daub isn't loaded */
  --color-bg: var(--db-white, #ffffff);
  --color-bg-secondary: var(--db-cream, #F7F6F3);
  --color-bg-tertiary: var(--db-cream-dark, #EDEAE4);

  /* Text */
  --color-text: var(--db-ink, #1A1A1A);
  --color-text-secondary: var(--db-charcoal, #5C5C5C);
  --color-text-tertiary: var(--db-warm-gray, #8A8A8A);

  /* Borders */
  --color-border: var(--db-sand, #D6D3CC);
  --color-border-secondary: var(--db-sand, #E8E6E1);

  /* Brand — maps to Daub accent */
  --color-brand: var(--db-terracotta, #1D7874);
  --color-brand-dark: var(--db-accent-dark, #145854);
  --color-brand-light: var(--db-accent-light, #E8F4F3);

  /* Status colors */
  --color-success: var(--db-success, #2D8A39);
  --color-success-light: #D1FAE5;
  --color-warning: var(--db-warning, #B45309);
  --color-warning-light: #FEF3C7;
  --color-danger: var(--db-error, #C93B28);
  --color-danger-light: #FEF0EF;
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-amber: #B8860B;

  /* Typography — keep our fonts, Daub doesn't override */
  --font-heading: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', monospace;

  /* MD2 typography roles */
  --text-overline: 11px;
  --text-meta: 12px;
  --text-ui: 14px;
  --text-reading: 16px;
  --text-title-sm: 16px;
  --text-title-md: 20px;
  --text-title-lg: 28px;
  --text-metric: 36px;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* Legacy aliases */
  --text-2xs: 10px;
  --text-xs: var(--text-meta);
  --text-sm: var(--text-ui);
  --text-base: var(--text-ui);
  --text-md: var(--text-reading);
  --text-lg: var(--text-title-md);
  --text-xl: 24px;
  --text-2xl: var(--text-title-lg);
  --text-3xl: 32px;
  --text-kpi: var(--text-metric);
}

/* ── Aliases (backward compat — modules can use either name) ── */
:root {
  --color-brand-primary: var(--color-brand);
  --color-background-primary: var(--color-bg);
  --color-background-secondary: var(--color-bg-secondary);
  --color-background-tertiary: var(--color-bg-tertiary);
  --color-background-info: var(--color-brand-light);
  --color-background-success: #E6F4E4;
  --color-background-warning: #FFF8E1;
  --color-background-danger: var(--color-danger-light);
  --color-text-primary: var(--color-text);
  --color-border-primary: var(--color-border);
}

/* ── Daub overrides — keep our fonts & suppress Daub's base reset conflicts ── */
[data-theme] { font-family: var(--font-body); color: var(--color-text); }
[data-theme] body { background: var(--color-bg); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base typography ── */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}
h1 {
  font-size: var(--text-title-lg);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--text-title-md);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--text-title-sm);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}

.type-overline {
  font-size: var(--text-overline);
  line-height: var(--leading-snug);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.type-meta {
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}
.type-body {
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}
.type-reading {
  font-size: var(--text-reading);
  line-height: var(--leading-relaxed);
}
.type-title-page {
  font-family: var(--font-heading);
  font-size: var(--text-title-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}
.type-title-section {
  font-family: var(--font-heading);
  font-size: var(--text-title-md);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}
.type-title-card {
  font-family: var(--font-heading);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
}
.type-data,
.type-mono {
  font-variant-numeric: tabular-nums;
}
.type-mono {
  font-family: var(--font-mono);
}

/* ── Shared button styles ── */
.btn {
  padding: 6px 14px;
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-heading);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover { background: var(--color-bg-tertiary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.btn-primary:hover { background: var(--color-brand-dark); }
.btn-sm { padding: 4px 10px; font-size: var(--text-meta); }

/* ── Shared badge styles ── */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: var(--text-overline);
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Loading / Error states ── */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
  font-size: var(--text-ui);
}
.error-banner {
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--color-danger);
  font-size: var(--text-ui);
  margin-bottom: 16px;
}

/* ── Responsive breakpoints ── */
@media (max-width: 768px) {
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
  .btn { padding: 5px 12px; font-size: var(--text-meta); }
}