/* MightyLife theme.css
   Extracted from index.php inline theme variables and normalized for reuse.
   Light mode = :root, Dark mode = [data-theme="dark"]
*/

:root{
  /* Core surfaces */
  --bg: #ffffff;
  --surface: rgba(255,255,255,.78);
  --surface2: #f7f8ff;

  /* Text */
  --text: #0a0a0a;
  --text-muted: rgba(10,10,10,.64);
  --text-soft: rgba(10,10,10,.50);

  /* Brand / accents */
  --accent: #2563eb;
  --accent2: #60a5fa;

  /* Lines & effects */
  --border: rgba(10,10,10,.10);
  --shadow: 0 18px 55px rgba(0,0,0,.08);
  --shadow2: 0 10px 30px rgba(0,0,0,.06);

  /* Background effects */
  --glow1: rgba(37,99,235,.16);
  --glow2: rgba(96,165,250,.14);
  --glow3: rgba(37,99,235,.08);
  --grid-line: rgba(10,10,10,.06);
  --grid-opacity: .1;

  /* Radius & layout */
  --r: 18px;
  --r2: 14px;
  --max: 1200px;

  color-scheme: light;
}

[data-theme="dark"]{
  --bg: #07080c;
  --surface: rgba(16,18,28,.72);
  --surface2: rgba(16,18,28,.50);

  --text: #f5f6ff;
  --text-muted: rgba(245,246,255,.70);
  --text-soft: rgba(245,246,255,.55);

  --accent: #3b82f6;
  --accent2: #60a5fa;

  --border: rgba(255,255,255,.10);
  --shadow: 0 22px 70px rgba(0,0,0,.45);
  --shadow2: 0 12px 35px rgba(0,0,0,.35);

  /* Keep the same glow hues (works well on dark) */
  --glow1: rgba(37,99,235,.16);
  --glow2: rgba(96,165,250,.14);
  --glow3: rgba(37,99,235,.08);

  /* Dark grid needs light lines */
  --grid-line: rgba(255,255,255,.08);
  --grid-opacity: .12;

  color-scheme: dark;
}

/* Base page styling (safe defaults) */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
  overflow-x: hidden;
}

/* Background: soft gradients + subtle grid */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 0%, var(--glow1), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, var(--glow2), transparent 60%),
    radial-gradient(900px 620px at 50% 100%, var(--glow3), transparent 55%);
  pointer-events:none;
  z-index:-2;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: var(--grid-opacity);
  pointer-events:none;
  z-index:-1;
}