/* ShiftControl UI Tokens + Contract Scaffold
   Scope: Admin + Frontend app surfaces.
   Doctrine: Namespaced, tokenized, region+state contract, SSR truth first.
*/

/* ---------- Token Scope ----------
   Apply tokens only inside our app shells to avoid WP/admin theme conflicts.
   We intentionally provide BOTH classes:
   - .shiftcontrol-admin : ShiftControl canonical
   - .cs-ai-seo-admin    : cross-plugin shared namespace (for ecosystem parity)
*/
.shiftcontrol-admin,
.cs-ai-seo-admin,
.shiftcontrol-app {
  /* Spacing */
  --cs-space-0: 0px;
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 20px;
  --cs-space-6: 24px;
  --cs-space-7: 32px;
  --cs-space-8: 40px;
  --cs-space-9: 48px;

  /* Radii */
  --cs-radius-1: 8px;
  --cs-radius-2: 12px;
  --cs-radius-3: 16px;

  /* Type */
  --cs-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --cs-text-xs: 12px;
  --cs-text-sm: 13px;
  --cs-text-base: 14px;
  --cs-text-lg: 16px;
  --cs-text-xl: 18px;

  /* Color (calm authority default) */
  --cs-bg: #0b1220;
  --cs-surface: rgba(255,255,255,0.06);
  --cs-surface-2: rgba(255,255,255,0.09);
  --cs-border: rgba(255,255,255,0.10);
  --cs-text: rgba(255,255,255,0.92);
  --cs-text-dim: rgba(255,255,255,0.70);

  /* Accents (monitoring tones) */
  --cs-accent: #21c1d6;
  --cs-accent-2: #2b7cff;

  /* Status */
  --cs-ok: #22c55e;
  --cs-warn: #f59e0b;
  --cs-risk: #ef4444;

  /* Shadows */
  --cs-shadow-1: 0 6px 20px rgba(0,0,0,0.25);
  --cs-shadow-2: 0 10px 30px rgba(0,0,0,0.35);
}

/* ---------- Base Primitives ---------- */
.shiftcontrol-admin,
.cs-ai-seo-admin,
.shiftcontrol-app {
  font-family: var(--cs-font-sans);
  color: var(--cs-text);
}

/* Region contract */
.cs-region {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-2);
  box-shadow: var(--cs-shadow-1);
  padding: var(--cs-space-6);
}

.cs-region__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-4);
}

.cs-region__title {
  font-size: var(--cs-text-lg);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.cs-region__subtitle {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-dim);
  margin: var(--cs-space-1) 0 0;
}

/* State contract */
.cs-state { border-radius: var(--cs-radius-1); padding: var(--cs-space-4); border: 1px dashed var(--cs-border); }
.cs-state--loading { opacity: 0.9; }
.cs-state--empty { color: var(--cs-text-dim); }
.cs-state--error { border-style: solid; border-color: rgba(239,68,68,0.35); }
.cs-state__label { font-size: var(--cs-text-sm); font-weight: 600; margin-bottom: var(--cs-space-2); }
.cs-state__body { font-size: var(--cs-text-base); color: var(--cs-text-dim); }

/* Small UI bits */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--cs-border);
  background: rgba(255,255,255,0.05);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-dim);
}

.cs-badge--ok { border-color: rgba(34,197,94,0.35); color: rgba(34,197,94,0.95); }
.cs-badge--warn { border-color: rgba(245,158,11,0.35); color: rgba(245,158,11,0.95); }
.cs-badge--risk { border-color: rgba(239,68,68,0.35); color: rgba(239,68,68,0.95); }

/* Utility: consistent gaps */
.cs-stack { display: flex; flex-direction: column; gap: var(--cs-space-4); }
.cs-row { display: flex; align-items: center; gap: var(--cs-space-4); flex-wrap: wrap; }

/* Profile cover fallback (non-shell usage) */
.shiftcontrol-app .scc-profile__cover{
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 140px;
  max-height: 320px;
  border-radius: var(--cs-radius-3);
  border: 1px solid var(--cs-border);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: var(--cs-space-4);
}