/* =========================================
   ZAPP THEME – EASY TWEAKERS
   ========================================= */
/* 
   HOW TO USE:
   - Change colors here to reskin the whole app.
   - Change font sizes here to make things bigger/smaller.
   - Change radius values to make cards more/less rounded.
*/

/* ---------- COLORS ---------- */

:root {
  /* Page & surfaces */
  --color-page-bg: #040906;      /* whole page background (behind image) */
  --color-card-bg: #11120e;      /* cards / panels / modals */
  --color-soft-overlay: rgba(15, 25, 20, 0.6);

  /* Header & nav */
  --color-header-bg: #717c5d;    /* top bar background */
  --color-nav-text: #ffffff;     /* nav button text */
  --color-nav-active-bg: #11120e;
  --color-nav-active-border: #7bba8e;

  /* Brand / accent */
  --color-accent-main: #1b7143;  /* main green */
  --color-accent-soft: rgba(27, 113, 67, 0.22);
  --color-accent-border: rgba(27, 113, 67, 0.25);
  --color-accent-neon: #0eef6d;  /* bright neon for borders / glow */

  /* Text */
  --color-text-main: #f5f7f5;
  --color-text-muted: #5f6859;
  --color-text-inverted: #000000;

  /* Status colors */
  --color-success: #22c55e;
  --color-warning: #f97316;
  --color-danger:  #ef4444;

  /* Table stripes / subtle fills */
  --color-row-alt: rgba(27, 113, 67, 0.06);
  --color-chip-bg: rgba(27, 113, 67, 0.06);
  --color-chip-bg-strong: rgba(27, 113, 67, 0.18);

  /* ---------- TYPOGRAPHY ---------- */

  --font-family-main: system-ui, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Segoe UI", sans-serif;

  --font-size-xs: 11px;  /* pills, tiny labels */
  --font-size-sm: 13px;  /* normal body text */
  --font-size-md: 16px;  /* card titles */
  --font-size-lg: 18px;  /* big numbers, key stats */

  --line-height-base: 1.4;

  /* ---------- RADII (ROUNDED CORNERS) ---------- */

  --radius-global: 14px;     /* master switch – change this first */
  --radius-card: var(--radius-global);
  --radius-field: 10px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */

  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-neon-soft: 0 0 6px rgba(14, 239, 109, 0.4);
  --shadow-neon-strong: 0 0 10px rgba(14, 239, 109, 0.55);

  /* =========================================
     BACKWARDS COMPAT – old variable names
     (so you don't have to rewrite all CSS)
     ========================================= */

  --bg: var(--color-page-bg);
  --bg-elevated: var(--color-card-bg);
  --bg-soft: var(--color-soft-overlay);

  --accent: var(--color-accent-main);
  --accent-soft: var(--color-accent-soft);

  --border: var(--color-accent-border);

  --text: var(--color-text-main);
  --text-muted: var(--color-text-muted);

  --radius-lg: var(--radius-card);
  --radius-md: var(--radius-field);
}