/*
 Enqueue handle: cam-frontend-overhaul-css
 Version: 1.0.0
 Dependencies: none (keeps footprint small)
 Usage (WP): wp_enqueue_style('cam-frontend-overhaul-css', plugin_dir_url(__FILE__) . 'assets/css/frontend-overhaul.css', array(), '1.0.0');
*/
:root{
  --cam-bg: #ffffff;
  --cam-text: #111827;
  --cam-muted: #6b7280;
  --cam-accent: #2563eb; /* blue-600 */
  --cam-surface: #f9fafb;
  --cam-border: #e5e7eb;
  --cam-success: #10b981;
}
.theme-dark{
  --cam-bg: #0b1220;
  --cam-text: #e6eef8;
  --cam-muted: #9aa6b2;
  --cam-accent: #60a5fa;
  --cam-surface: #071021;
  --cam-border: #1f2937;
  --cam-success: #34d399;
}

/* Reset for demo components only (kept minimal) */
.cam-demo-root{background:var(--cam-bg);color:var(--cam-text);font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';padding:24px;}

.cam-card{background:var(--cam-surface);border:1px solid var(--cam-border);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,0.04);max-width:720px;margin:12px auto}
.cam-row{display:flex;gap:16px;align-items:center}
.cam-col{flex:1}

/* Progress ring wrapper */
.cam-progress{width:160px;height:160px;display:inline-grid;place-items:center}
.cam-progress svg{width:100%;height:100%;display:block}
.cam-progress .label{font-size:18px;font-weight:600;color:var(--cam-text);}
.cam-progress .sub{font-size:12px;color:var(--cam-muted);}

/* Chart placeholder */
.cam-chart{width:100%;height:260px;border-radius:8px;padding:8px;background:linear-gradient(180deg,transparent, rgba(0,0,0,0.02));}

/* Responsive */
@media (max-width: 900px){
  .cam-row{flex-direction:column;align-items:stretch}
  .cam-progress{width:140px;height:140px;margin:0 auto}
  .cam-chart{height:220px}
}
@media (max-width: 480px){
  .cam-progress{width:120px;height:120px}
  .cam-card{padding:12px}
  .cam-chart{height:180px}
}

/* Animations (prefers-reduced-motion honored) */
@media (prefers-reduced-motion: no-preference){
  .cam-progress .ring{transition:stroke-dashoffset 900ms cubic-bezier(.2,.9,.2,1)}
  .cam-chart canvas{transition:opacity 600ms ease}
}
@media (prefers-reduced-motion: reduce){
  .cam-progress .ring{transition:none}
  .cam-chart canvas{transition:none}
}

/* focus & accessible states */
.cam-card:focus-within{outline:2px solid color-mix(in srgb, var(--cam-accent) 20%, transparent);outline-offset:4px}
button.cam-toggle{appearance:none;border:1px solid var(--cam-border);background:transparent;padding:8px 10px;border-radius:8px;color:var(--cam-text);cursor:pointer}
button.cam-toggle:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--cam-accent) 16%, transparent)}

/* Dark/light helper classes */
.cam-dark-toggle{display:inline-flex;gap:8px;align-items:center}

/* Small utilities */
.muted{color:var(--cam-muted);font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}