/* ============================================================
   GIGAnalyser — Shared theme variables (Apple-style: black/blue/white)
   ------------------------------------------------------------
   One class on <html> (`dark` or `light`) drives every color in
   the app: Tailwind tokens (surface / text / accent / canvas) in
   tailwind.config, AND the per-page <style> blocks.

   Colors are stored as space-separated RGB CHANNELS so Tailwind's
   `/opacity` modifier works (e.g. bg-surface/80). Convenience
   `--color-*` vars (opaque rgb()) are also exposed for raw use in
   <style> blocks.

   Palette:
     surface       #ffffff  (light) / #0a0a0f (dark)
     text          #0a0a0f  (light) / #ffffff (dark)
     accent blue   #4a8df7
     accent hover  #3a7adf
     WA green      #25d366   (brand-locked)
   ============================================================ */

:root {
  /* Brand palette — used by the entire app */
  --blue:           74 141 247;   /* #4a8df7 — primary accent */
  --blue-hover:     58 122 223;   /* #3a7adf — darker on hover */
  --wa-green:       37 211 102;   /* #25d366 — WhatsApp brand */
  --wa-green-hover: 31 184 89;
}

/* ----------------------- DARK (Apple-style near-black) ----------------------- */
html.dark {
  --surface-rgb:          10 10 15;     /* #0a0a0f */
  --surface-raised-rgb:   22 22 30;     /* slightly raised */
  --surface-border-rgb:   42 42 56;     /* soft divider */
  --text-primary-rgb:     255 255 255;  /* #FFFFFF */
  --text-secondary-rgb:   200 205 215;  /* muted blue-gray */
  --text-muted-rgb:       140 148 168;
  --accent-rgb:           74 141 247;   /* #4a8df7 — same blue pops on dark */
  --accent-hover-rgb:     122 169 247;  /* lighter blue on hover in dark mode */
  --accent-muted-rgb:     56 122 223;

  --canvas-rgb:           10 10 15;
  --canvas-raised-rgb:    22 22 30;
  --canvas-card-rgb:      30 30 40;
  --canvas-border-rgb:    42 42 56;
  --canvas-text-rgb:      255 255 255;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(74, 141, 247, 0.20);
  --overlay: rgba(0, 0, 0, 0.7);
}

/* ----------------------- LIGHT (default — pure white Apple) ----------------------- */
html.light,
html:not(.light):not(.dark) {
  --surface-rgb:          255 255 255; /* #ffffff */
  --surface-raised-rgb:   250 250 252; /* very light gray card */
  --surface-border-rgb:   230 232 238;  /* subtle border */
  --text-primary-rgb:     10 10 15;    /* #0a0a0f */
  --text-secondary-rgb:   90 96 112;   /* muted slate */
  --text-muted-rgb:       140 148 168;
  --accent-rgb:           74 141 247;  /* #4a8df7 */
  --accent-hover-rgb:     58 122 223;
  --accent-muted-rgb:     56 122 223;

  --canvas-rgb:           255 255 255;
  --canvas-raised-rgb:    250 250 252;
  --canvas-card-rgb:      255 255 255;
  --canvas-border-rgb:    230 232 238;
  --canvas-text-rgb:      10 10 15;

  --shadow-card: 0 8px 32px rgba(10, 10, 15, 0.06);
  --shadow-glow: 0 0 40px rgba(74, 141, 247, 0.15);
  --overlay: rgba(10, 10, 15, 0.4);
}

/* Convenience opaque vars for raw use in <style> blocks. */
html.dark {
  --color-surface:        rgb(var(--surface-rgb));
  --color-surface-raised: rgb(var(--surface-raised-rgb));
  --color-surface-border: rgb(var(--surface-border-rgb));
  --color-text-primary:   rgb(var(--text-primary-rgb));
  --color-text-secondary: rgb(var(--text-secondary-rgb));
  --color-text-muted:     rgb(var(--text-muted-rgb));
  --color-accent:         rgb(var(--accent-rgb));
  --color-accent-hover:   rgb(var(--accent-hover-rgb));
  --color-accent-muted:   rgb(var(--accent-muted-rgb));
  --color-canvas:         rgb(var(--canvas-rgb));
  --color-canvas-raised:  rgb(var(--canvas-raised-rgb));
  --color-canvas-card:    rgb(var(--canvas-card-rgb));
  --color-canvas-border:  rgb(var(--canvas-border-rgb));
  --color-canvas-text:    rgb(var(--canvas-text-rgb));
}
html.light,
html:not(.light):not(.dark) {
  --color-surface:        rgb(var(--surface-rgb));
  --color-surface-raised: rgb(var(--surface-raised-rgb));
  --color-surface-border: rgb(var(--surface-border-rgb));
  --color-text-primary:   rgb(var(--text-primary-rgb));
  --color-text-secondary: rgb(var(--text-secondary-rgb));
  --color-text-muted:     rgb(var(--text-muted-rgb));
  --color-accent:         rgb(var(--accent-rgb));
  --color-accent-hover:   rgb(var(--accent-hover-rgb));
  --color-accent-muted:   rgb(var(--accent-muted-rgb));
  --color-canvas:         rgb(var(--canvas-rgb));
  --color-canvas-raised:  rgb(var(--canvas-raised-rgb));
  --color-canvas-card:    rgb(var(--canvas-card-rgb));
  --color-canvas-border:  rgb(var(--canvas-border-rgb));
  --color-canvas-text:    rgb(var(--canvas-text-rgb));
}

html {
  background-color: rgb(var(--surface-rgb));
  color-scheme: light;
}
html.dark { color-scheme: dark; }
body { color: rgb(var(--text-primary-rgb)); }

/* Scrollbars + selection follow the active theme automatically. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgb(var(--surface-rgb)); }
::-webkit-scrollbar-thumb { background: rgb(var(--surface-border-rgb)); border-radius: 3px; }
::selection { background: rgba(74, 141, 247, 0.25); }

/* ----------------------- Theme toggle button -----------------------
   Used by pages whose button carries class="theme-toggle". */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  line-height: 1;
  border: 1px solid rgb(var(--surface-border-rgb));
  background: rgb(var(--surface-raised-rgb));
  color: rgb(var(--text-primary-rgb));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.theme-toggle:hover { border-color: rgb(var(--accent-rgb)); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}

/* ----------------------- Brand-locked colors -----------------------
   Use these for any surface that must stay on-brand regardless of theme. */
.btn-wa, .wa-link { color: var(--wa-green); }
.bg-wa { background-color: var(--wa-green); color: #fff; }