/* ═══════════════════════════════════════════════════════════════
   Theme: Pastel Goth Studyblr (default, dark)
   Deep midnight + electric blue + violet + dusty pink
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Dark goth palette */
  --midnight: #0E0D17;          /* main bg */
  --midnight-deep: #07060F;     /* darkest */
  --void: #16142A;              /* card bg */
  --void-soft: #1E1B36;         /* elevated card */
  --plum: #2A2545;              /* borders, dividers */

  /* Electric / vibrant accents */
  --electric: #60E0FF;          /* electric blue, primary */
  --electric-deep: #2563EB;     /* darker variant */
  --violet: #A78BFA;            /* lavender accent */
  --violet-deep: #7C3AED;
  --pink: #F9A8D4;              /* dusty pastel pink */
  --pink-deep: #EC4899;         /* hot pink hover */
  --blood: #F43F5E;             /* danger / hot accent */

  /* Functional categories */
  --safe-bg: rgba(94, 234, 212, 0.10);
  --safe-border: #5EEAD4;        /* turquoise mint */
  --safe-text: #5EEAD4;
  --reach-bg: rgba(249, 168, 212, 0.10);
  --reach-border: #F9A8D4;       /* dusty pink */
  --reach-text: #F9A8D4;
  --out-bg: rgba(82, 82, 91, 0.15);
  --out-border: #71717A;         /* zinc grey, not aggressive */
  --out-text: #71717A;

  /* Text tones */
  --text-bright: #F4F4F5;        /* main text */
  --text-soft: #C4C4D4;          /* secondary text */
  --text-muted: #7C7B98;         /* labels, meta */

  /* Shadows: mocniejsze, neonowe */
  --shadow-soft: 0 4px 16px -4px rgba(96, 224, 255, 0.10), 0 2px 4px rgba(0,0,0,0.5);
  --shadow-medium: 0 8px 24px -4px rgba(96, 224, 255, 0.18), 0 4px 12px rgba(0,0,0,0.6);
  --shadow-bold: 0 16px 48px -8px rgba(167, 139, 250, 0.30), 0 0 24px rgba(96, 224, 255, 0.15);
  --glow-electric: 0 0 16px rgba(96, 224, 255, 0.45);
  --glow-pink: 0 0 16px rgba(249, 168, 212, 0.45);

  /* Fonty: Fraunces (display) + Plus Jakarta Sans (body) — nowoczesna sztampa */
  --font-display: 'Fraunces';
  --font-body: 'Plus Jakarta Sans';

  /* Layout vars (kontrolują kształt UI per-theme) */
  --card-radius: 1.25rem;
  --input-radius: 0.625rem;

  /* Surface vars (przejmowane przez header/sidebar/forms w style.css) */
  --header-bg: linear-gradient(135deg, rgba(22, 20, 42, 0.85) 0%, rgba(14, 13, 23, 0.85) 100%);
  --header-border: rgba(96, 224, 255, 0.20);
  --header-shadow: 0 1px 0 rgba(96, 224, 255, 0.08), 0 4px 24px rgba(0,0,0,0.5);
  --card-bg: linear-gradient(160deg, rgba(30, 27, 54, 0.85) 0%, rgba(22, 20, 42, 0.85) 100%);
  --card-bg-soft: rgba(22, 20, 42, 0.7);
  --card-bg-hover: rgba(124, 58, 237, 0.20);
  --card-border: rgba(96, 224, 255, 0.18);
  --input-bg: rgba(14, 13, 23, 0.8);
  --input-border: rgba(167, 139, 250, 0.30);
  --overlay-bg: rgba(7, 6, 15, 0.75);
  --bg-grad-1: rgba(96, 224, 255, 0.08);
  --bg-grad-2: rgba(167, 139, 250, 0.10);
  --bg-grad-3: rgba(244, 63, 94, 0.06);
}