/* ============================================================
   variables.css — All CSS custom properties
   UI uses Neon-Slate design language.
   Calendar page (.cal-page) uses --cal-* vars controlled by themes.
   ============================================================ */

:root {

  /* ── UI BACKGROUNDS (Neon-Slate) ──────────────────────────── */
  --bg-app:    #1e1e2f;   /* workspace behind the paper */
  --bg-panel:  #27293d;   /* sidebar, cards, modals */
  --bg-input:  #1a1a27;   /* inputs, selects — inset/darker than surface */
  --bg-hover:  #32344a;   /* subtle hover states */

  /* ── UI TYPOGRAPHY ────────────────────────────────────────── */
  --text-main:  #ffffff;
  --text-muted: #8e8ea6;

  /* ── NEON ACCENTS ─────────────────────────────────────────── */
  --neon-pink:   #fd5d93;
  --neon-blue:   #1d8cf8;
  --neon-purple: #8f66fe;
  --neon-green:  #00f2c3;

  /* ── GRADIENTS ────────────────────────────────────────────── */
  --grad-pink:   linear-gradient(to bottom right, #ff4b72, #fd5d93);
  --grad-blue:   linear-gradient(to bottom right, #1d8cf8, #3358f4);
  --grad-purple: linear-gradient(to bottom right, #b86bff, #8a2be2);

  /* ── SHADOWS ──────────────────────────────────────────────── */
  --shadow-soft:       0 10px 30px rgba(0,0,0,0.4);
  --shadow-glow-pink:  0 4px 15px rgba(253,93,147,0.4);
  --shadow-glow-blue:  0 4px 15px rgba(29,140,248,0.4);
  --shadow-paper:      0 25px 60px rgba(0,0,0,0.6);

  /* ── GEOMETRY ─────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-pill: 50px;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --sidebar-w:   360px;

  /* ── CALENDAR PAGE (theme-controlled) ────────────────────── */
  --cal-bg:      #ffffff;
  --cal-txt:     #0f172a;
  --cal-acc:     #3b82f6;
  --cal-wknd:    #ef4444;
  --cal-bdr:     #e2e8f0;
  --cal-mut:     #94a3b8;
  --cal-hbg:     #eff6ff;
  --cal-htxt:    #1d4ed8;
  --cal-fh:      'Montserrat', sans-serif;
  --cal-fb:      'Roboto', sans-serif;
  --cal-fd:      'Montserrat', sans-serif;
  --cal-dnsize:  15px;
  --cal-dnwt:    700;
  --cal-dnalign: right;
  --cal-hlsize:  5.5px;
  --cal-cp:      3px;

  /* ── PHOTO ZONE ───────────────────────────────────────────── */
  --photo-h:     40%;
  --preview-w:   420px;

  /* ── PAPER DIMENSIONS (updated by JS on paper size change) ── */
  --page-w:      210mm;
  --page-h:      297mm;
}