/* ═══════════════════════════════════════════════════════════
   Medical Universe — Design Tokens
   CSS Custom Properties consumed by all other stylesheets.
   Brand colors are overridden at runtime by main.php's <style>
   block which injects values from global_settings.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (overridden by PHP CSS-var injection) ────────── */
  --brand-primary:    #0066CC;
  --brand-secondary:  #0B1B3D;
  --brand-accent:     #00B4D8;

  /* Derived tints */
  --brand-primary-10:  color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --brand-primary-20:  color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 85%, #000);

  /* ── Neutral palette (dark mode via .dark class on <html>) ─ */
  --color-surface:    #ffffff;
  --color-surface-2:  #f8fafc;
  --color-surface-3:  #f1f5f9;
  --color-border:     #e2e8f0;
  --color-text:       #0f172a;
  --color-text-muted: #64748b;
  --color-text-inv:   #ffffff;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px  3px 0 rgb(0 0 0 / .06), 0 1px  2px -1px rgb(0 0 0 / .06);
  --shadow-card: 0 4px  6px -1px rgb(0 0 0 / .08), 0 2px  4px -2px rgb(0 0 0 / .08);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / .08), 0 4px  6px -4px rgb(0 0 0 / .08);
  --shadow-glow: 0 0 20px 4px color-mix(in srgb, var(--brand-primary) 30%, transparent);

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:   .375rem;
  --radius-card: 1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 9999px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-smooth: all .25s cubic-bezier(.4, 0, .2, 1);
  --transition-bounce: all .4s cubic-bezier(.34, 1.56, .64, 1);
  --transition-explode: all .6s cubic-bezier(.22, 1, .36, 1);

  /* ── Sidebar ─────────────────────────────────────────────── */
  --sidebar-width:         260px;
  --sidebar-collapsed-w:   72px;
  --topbar-height:         64px;
  --color-sidebar-bg:      var(--brand-secondary); /* dark navy in light mode */

  /* ── FullCalendar dark-mode vars (shared) ────────────────── */
  --fc-border-color:        var(--color-border);
  --fc-today-bg-color:      var(--brand-primary-10);
  --fc-event-bg-color:      var(--brand-primary);
  --fc-event-border-color:  var(--brand-primary-hover);
  --fc-button-bg-color:     var(--brand-primary);
  --fc-button-hover-bg-color: var(--brand-primary-hover);
}

/* ── Dark mode overrides ──────────────────────────────────── */
.dark {
  --color-surface:    #0f1729;
  --color-surface-2:  #1a2744;
  --color-surface-3:  #1e2e50;
  --color-border:     #2d3f6b;
  --color-text:       #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-inv:   #0f172a;

  --shadow-sm:   0 1px  3px 0 rgb(0 0 0 / .3);
  --shadow-card: 0 4px  6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);

  /* Sidebar slightly lighter in dark mode so it contrasts with the darker surface */
  --color-sidebar-bg: #1a2d52;
}
