/* ============================================================
   AVP.InfoDb — Foundations (Colors + Type)
   Final palette: Set 02B "Royal" — deep indigo + marigold on cool cream.
   Light theme is default. Dark theme via html[data-theme="dark"].
   ============================================================ */

:root {
  --font-ui:    'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;

  /* Brand */
  --brand-primary:        #1e1b4b;   /* indigo 950 — solid mark fill, brand surface */
  --brand-primary-500:    #4338ca;   /* indigo 700 — buttons, links, active */
  --brand-primary-hover:  #3730a3;   /* indigo 800 */
  --brand-primary-soft:   #e0e7ff;   /* indigo 100 — soft pill bg, active nav */
  --brand-primary-ring:   rgba(67, 56, 202, 0.30);

  --brand-accent:         #fbbf24;   /* marigold — accent only, never CTAs */
  --brand-accent-hover:   #f59e0b;
  --brand-accent-soft:    #fef9c3;

  /* Surfaces — cool cream paper feel */
  --bg-app:        #f7f5ed;
  --bg-subtle:     #efece1;
  --surface:       #ffffff;
  --surface-hover: #f7f5ed;
  --border:        #e2dccd;
  --border-strong: #cdc4ac;

  /* Text — leans into indigo instead of pure black */
  --text-primary:   #0f0d2e;
  --text-secondary: #2a2654;
  --text-muted:     #635e80;
  --text-faint:     #9b96b0;
  --text-on-brand:  #f7f5ed;

  /* Semantic */
  --success-fg:  #15803d;  --success-bg:  #dcfce7;  --success-text: #14532d;
  --warning-fg:  #b45309;  --warning-bg:  #fef3c7;  --warning-text: #78350f;
  --danger-fg:   #b91c1c;  --danger-bg:   #fee2e2;  --danger-text:  #7f1d1d;
  --info-fg:     #4338ca;  --info-bg:     #e0e7ff;  --info-text:    #1e1b4b;
}

/* Dark theme — "Slate" (locked).
   Neutral-cool slate surfaces, no lila in the body.
   Indigo + marigold sit ON TOP as accents, not woven into the chrome. */
html[data-theme="dark"] {
  --brand-primary:        #818cf8;
  --brand-primary-500:    #818cf8;
  --brand-primary-hover:  #a5b4fc;
  --brand-primary-soft:   rgba(99,102,241,0.16);
  --brand-primary-ring:   rgba(129,140,248,0.30);

  --brand-accent:         #fbbf24;
  --brand-accent-hover:   #fcd34d;
  --brand-accent-soft:    rgba(251,191,36,0.16);

  --bg-app:        #0b0f17;
  --bg-subtle:     #111827;
  --surface:       #161e2d;
  --surface-hover: #1e2738;
  --border:        #1f2937;
  --border-strong: #334155;

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-faint:     #64748b;
  --text-on-brand:  #f7f5ed;
}

/* ============================================================
   Spacing, radii, shadows
   ============================================================ */
:root {
  --space-1: 2px;  --space-2: 4px;   --space-3: 6px;   --space-4: 8px;
  --space-5: 10px; --space-6: 12px;  --space-7: 14px;  --space-8: 16px;
  --space-10: 20px; --space-12: 24px; --space-14: 28px; --space-16: 32px;
  --space-18: 36px; --space-24: 48px;

  --radius-card:  12px;
  --radius-input: 8px;
  --radius-btn:   8px;
  --radius-pill:  9999px;
  --radius-modal: 12px;

  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}

/* ============================================================
   Type scale
   ============================================================ */
:root {
  --type-body:     400 14px/1.5  var(--font-ui);
  --type-body-sm:  400 13px/1.5  var(--font-ui);
  --type-label:      500 12.5px/1.3 var(--font-ui);
  --type-label-hint: 400 12.5px/1.3 var(--font-ui);
  --type-input:      400 13.5px/1.4 var(--font-ui);
  --type-btn:    500 13px/1   var(--font-ui);
  --type-btn-sm: 500 12px/1   var(--font-ui);
  --type-btn-lg: 500 14px/1   var(--font-ui);
  --type-table-cell:   400 13px/1.4   var(--font-ui);
  --type-table-header: 500 11.5px/1.2 var(--font-ui);
  --type-badge:        500 11.5px/1   var(--font-ui);
  --type-nav-item:     500 13px/1.2   var(--font-ui);
  --type-nav-section:  600 10.5px/1.2 var(--font-ui);
  --type-page-title:    600 22px/1.2  var(--font-ui);
  --type-page-subtitle: 400 13.5px/1.5 var(--font-ui);
  --type-h2-content:    600 18px/1.3  var(--font-ui);
  --type-card-header:   600 14px/1.3  var(--font-ui);
  --type-modal-title:   600 14px/1.3  var(--font-ui);
  --type-stat:        600 28px/1.1  var(--font-ui);
  --type-stat-label:  500 12px/1.3  var(--font-ui);
  --type-eyebrow:     600 11px/1.3  var(--font-ui);
  --type-wizard-title: 600 32px/1.15 var(--font-ui);
  --type-wizard-desc:  400 15px/1.55 var(--font-ui);
}

/* ============================================================
   Semantic helpers
   ============================================================ */
.ds-page-title    { font: var(--type-page-title);    color: var(--text-primary);   letter-spacing: -0.02em;  margin: 0; }
.ds-page-subtitle { font: var(--type-page-subtitle); color: var(--text-muted);     margin: 0; }
.ds-h2            { font: var(--type-h2-content);    color: var(--text-primary);   letter-spacing: -0.01em;  margin: 0; }
.ds-card-header   { font: var(--type-card-header);   color: var(--text-primary);   letter-spacing: -0.005em; margin: 0; }
.ds-eyebrow       { font: var(--type-eyebrow);       color: var(--text-muted);     text-transform: uppercase; letter-spacing: 0.1em; }
.ds-table-header  { font: var(--type-table-header);  color: var(--text-muted);     text-transform: uppercase; letter-spacing: 0.05em; }
.ds-nav-section   { font: var(--type-nav-section);   color: var(--text-muted);     text-transform: uppercase; letter-spacing: 0.08em; }
.ds-label         { font: var(--type-label);         color: var(--text-secondary); }
.ds-label-hint    { font: var(--type-label-hint);    color: var(--text-muted); }
.ds-stat          { font: var(--type-stat);          color: var(--text-primary);   font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ds-stat-label    { font: var(--type-stat-label);    color: var(--text-muted);     text-transform: uppercase; letter-spacing: 0.05em; }
.ds-mono          { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Fälligkeitsdatum-Hervorhebung (Festlegung vom 29.07.2026, Änderung 2d) — gemeinsam genutzt
   von TopicTable.razor, TopicCards.razor, TopicDetailPanel.razor und PhaseTimelineItem.razor
   über DueDateFormatter.CssClass. Absichtlich hier statt in den einzelnen *.razor.css-Dateien,
   damit die Farbwahl an genau einer Stelle steht. */
.ds-due--muted   { color: var(--text-muted); }
.ds-due--overdue { color: var(--danger-fg); }
.ds-due--today   { color: var(--warning-fg); }