/* ============================================================
   GUARDIAN MESH — THEME
   Semantic variable assignments for light and dark modes.
   Option B (Soft) with #E5E5E5 dark text.
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: 4px; }

/* ── Light Theme (default) ── */
:root {
  --bg-page:          #F5F4F2;
  --bg-surface:       #FFFFFF;
  --bg-inset:         #f7f7f7;
  --bg-muted:         #f5f5f5;
  --border:           #E0DDD8;
  --border-focus:     #1A1A1A;
  --text-primary:     #1A1A1A;
  --text-secondary:   #6B6B6B;
  --text-muted:       #6B6B6B;
  --text-faint:       #999;
  --text-inverse:     #F5F4F2;
  --btn-primary-bg:   #2C2C2C;
  --btn-primary-color:#F5F4F2;
  --btn-primary-hover:0.85;
  --shadow:           rgba(0,0,0,0.07);
  --nav-logo-filter:  none;

  /* ── Inverted panels (dark bg in light, flips in dark) ── */
  --panel-dark-bg:     #1A1A1A;
  --panel-dark-text:   #F5F4F2;
  --panel-dark-sub:    #999999;
  --panel-dark-border: #2C2C2C;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg-page:          #1A1A1A;
  --bg-surface:       #222222;
  --bg-inset:         #1C1C1C;
  --bg-muted:         #2A2A2A;
  --border:           #333333;
  --border-focus:     #E5E5E5;
  --text-primary:     #E5E5E5;
  --text-secondary:   #888888;
  --text-muted:       #6B6B6B;
  --text-faint:       #555555;
  --text-inverse:     #1A1A1A;
  --btn-primary-bg:   #E5E5E5;
  --btn-primary-color:#1A1A1A;
  --btn-primary-hover:0.90;
  --shadow:           rgba(0,0,0,0.4);
  --nav-logo-filter:  invert(1);

  /* ── Inverted panels ── */
  --panel-dark-bg:     #E5E5E5;
  --panel-dark-text:   #1A1A1A;
  --panel-dark-sub:    #6B6B6B;
  --panel-dark-border: #D4D4D4;
}

/* ── Base Body ── */
body {
  font-family: 'Aptos', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
}