/* Royal Roots CMS — design tokens, base reset, keyframes, responsive rules.
   Light SaaS-dashboard look (sidebar + stat cards + data table + slide-over
   editor). Per-element styling is applied inline by js/cms.js — these tokens
   are what that inline CSS reads via var(...). */

:root {
  --bg: #F5F5F9;
  --surface: #FFFFFF;
  --surface-2: #FAFAFD;
  --border: #E7E7F0;
  --border-soft: #F0F0F6;
  --ink: #17161D;
  --ink-rgb: 23,22,29;
  --ink-soft: #6B6A78;
  --ink-faint: #9C9BA8;
  --accent: #ec4899;
  --accent-rgb: 236,72,153;
  --accent-soft: #FCE7F3;
  --accent-deep: #9D174D;
  --ok: #1B7A4B;
  --ok-bg: #E8F7EF;
  --warn: #9A6414;
  --warn-bg: #FBF1E0;
  --danger: #C22C4D;
  --danger-bg: #FCEAEE;
  --shadow-sm: 0 1px 2px rgba(23,22,29,0.05);
  --shadow-md: 0 8px 24px rgba(23,22,29,0.08);
  --shadow-lg: 0 24px 64px rgba(23,22,29,0.18);
}

html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; }
input, textarea, select { font: inherit; }

@keyframes rr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes rr-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes rr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [style*="rr-pulse"], .rr-drawer, .rr-scrim { animation: none !important; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb),0.14); border-radius: 999px; border: 2px solid var(--surface); }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 980px) {
  .rr-shell { flex-wrap: wrap !important; }
  .rr-shell > aside { flex: 1 1 100% !important; max-width: none !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .rr-shell > main { flex: 1 1 100% !important; min-width: 0 !important; }
  .rr-shell > aside .rr-nav { flex-direction: row !important; overflow-x: auto; scrollbar-width: none; gap: 4px !important; }
  .rr-shell > aside .rr-nav::-webkit-scrollbar { display: none; }
  .rr-shell > aside .rr-nav a { flex: 0 0 auto !important; }
  .rr-shell > aside .rr-nav-group-label { display: none !important; }
  .rr-shell > aside .rr-sidebar-footer { display: none !important; }
  .rr-stat-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .rr-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .rr-table thead { display: none; }
  .rr-table, .rr-table tbody, .rr-table tr, .rr-table td { display: block; width: 100%; }
  .rr-table tr { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
  .rr-table td { border: none !important; padding: 3px 0 !important; }
  .rr-drawer { width: 100% !important; }
}