/* ============================================================
   Theme variables — dark (default) and light override
   Loaded by: src/main.jsx (React app) and guide pages via <link>
   ============================================================ */

:root {
  /* --- Backgrounds --- */
  --bg-page:        #0D1117;
  --bg-surface:     #161B22;
  --bg-surface-2:   #1c2128;
  --bg-surface-3:   #222222;
  --bg-surface-4:   #2a2a2a;
  --bg-inset:       #0d0d0d;
  --bg-inset-blue:  #1a1a2e;

  /* --- Borders --- */
  --border-subtle:  #21262d;
  --border-default: #30363d;
  --border-strong:  #444c56;
  --border-muted:   #333333;

  /* --- Text --- */
  --text-primary:   #E6EDF3;
  --text-secondary: #cdd9e5;
  --text-tertiary:  #adbac7;
  --text-muted:     #888888;
  --text-faint:     #666666;
  --text-dimmed:    #555555;

  /* --- Accent (blue) --- */
  --accent:         #3A7CA5;
  --accent-light:   #5FB3CE;
  --accent-dark:    #2d6a8f;

  /* --- Code --- */
  --code-text:      #79c0ff;
  --code-text-alt:  #a5d6ff;

  /* --- Status: Pass (green) --- */
  --pass-text:      #6bff6b;
  --pass-text-2:    #56d364;
  --pass-text-3:    #4ade80;
  --pass-text-4:    #22c55e;
  --pass-bg:        #1a2e1a;
  --pass-bg-2:      #2d5a2d;
  --pass-border:    #2d5a2d;
  --pass-border-2:  #166534;

  /* --- Status: Warn (yellow/amber) --- */
  --warn-text:      #fbbf24;
  --warn-text-2:    #e3b341;
  --warn-border:    #ca8a04;
  --warn-border-2:  #5a4a2d;
  --warn-bg:        #3a3a1a;
  --warn-bg-2:      #2e281a;

  /* --- Status: Fail (red) --- */
  --fail-text:      #f87171;
  --fail-text-2:    #ff6b6b;
  --fail-text-3:    #ef4444;
  --fail-border:    #dc2626;
  --fail-border-2:  #5a2d2d;
  --fail-bg:        #3a1a1a;
  --fail-bg-2:      #2e1a1a;

  /* --- Specialty colors --- */
  --color-domain:    #6bdfff;
  --color-purple:    #b388ff;
  --color-purple-bg: #4a3a5a;
  --color-indigo:    #a0a0ff;
  --color-indigo-bg: #2a2a3a;

  /* --- Extra category/mailing-list colors --- */
  --color-orange:      #ea580c;
  --color-orange-light: #fb923c;
  --color-pink:        #ff6b9d;
  --color-info:        #60a5fa;

  /* --- Sticky nav --- */
  --nav-sticky-bg:  rgba(13, 17, 23, 0.95);

  /* --- Theme toggle button --- */
  --toggle-bg:      #1c2128;
  --toggle-border:  #444c56;
  --toggle-color:   #888888;
}

/* ---- Light mode overrides ---- */
html[data-theme="light"] {
  color-scheme: light;

  /* --- Backgrounds --- */
  --bg-page:        #f6f8fa;
  --bg-surface:     #ffffff;
  --bg-surface-2:   #f0f2f5;
  --bg-surface-3:   #e8eaed;
  --bg-surface-4:   #dde1e7;
  --bg-inset:       #eaecef;
  --bg-inset-blue:  #ddf4ff;

  /* --- Borders --- */
  --border-subtle:  #d0d7de;
  --border-default: #c6cbd1;
  --border-strong:  #afb8c1;
  --border-muted:   #d0d7de;

  /* --- Text --- */
  --text-primary:   #1c2128;
  --text-secondary: #24292f;
  --text-tertiary:  #424a53;
  --text-muted:     #57606a;
  --text-faint:     #6e7781;
  --text-dimmed:    #8c959f;

  /* --- Accent --- */
  --accent:         #1a6491;
  --accent-light:   #2188b4;
  --accent-dark:    #124a6e;

  /* --- Code --- */
  --code-text:      #0550ae;
  --code-text-alt:  #0a6195;

  /* --- Status: Pass --- */
  --pass-text:      #1a7f37;
  --pass-text-2:    #2da44e;
  --pass-text-3:    #1f883d;
  --pass-text-4:    #1a7f37;
  --pass-bg:        #dafbe1;
  --pass-bg-2:      #ccffd8;
  --pass-border:    #4ac26b;
  --pass-border-2:  #2da44e;

  /* --- Status: Warn --- */
  --warn-text:      #7d4e00;
  --warn-text-2:    #7a4503;
  --warn-border:    #d4a72c;
  --warn-border-2:  #c69026;
  --warn-bg:        #fff5e0;
  --warn-bg-2:      #fef3c7;

  /* --- Status: Fail --- */
  --fail-text:      #cf222e;
  --fail-text-2:    #d1242f;
  --fail-text-3:    #b91c1c;
  --fail-border:    #f85149;
  --fail-border-2:  #e5534b;
  --fail-bg:        #ffebe9;
  --fail-bg-2:      #fef2f2;

  /* --- Specialty --- */
  --color-domain:    #0a6195;
  --color-purple:    #8250df;
  --color-purple-bg: #e8dcff;
  --color-indigo:    #6639ba;
  --color-indigo-bg: #ede8ff;

  /* --- Extra category/mailing-list colors --- */
  --color-orange:      #c2410c;
  --color-orange-light: #ea580c;
  --color-pink:        #db2777;
  --color-info:        #2563eb;

  /* --- Sticky nav --- */
  --nav-sticky-bg:  rgba(246, 248, 250, 0.95);

  /* --- Theme toggle button --- */
  --toggle-bg:      #f0f2f5;
  --toggle-border:  #afb8c1;
  --toggle-color:   #57606a;
}