/**
 * Social Agent — Design Tokens
 * Single source of truth for typography + color across the /social app AND the plugin's wp-admin pages.
 * Primary brand color: #073d72. Primary font: Geist (self-hosted).
 *
 * Usage: enqueue this file first, then reference the CSS variables everywhere.
 * Apply the `.sa-scope` class to the app <body> and to each plugin admin-page wrapper
 * so typography + base colors apply consistently in both places.
 */

/* ------------------------------------------------------------------ *
 * Geist — self-hosted (no CDN). Place the .woff2 files in ../fonts/.
 * Download from the official Geist font repository (SIL OFL).
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Geist-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Geist-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Geist-Bold.woff2") format("woff2");
}
/* Optional monospace for code / IDs / timestamps */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/GeistMono-Regular.woff2") format("woff2");
}

:root {
  /* Typography */
  --sa-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sa-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Brand blue scale (from #073d72) */
  --sa-primary:         #073d72;  /* brand — primary buttons, active nav, key accents */
  --sa-primary-hover:   #0a4a89;  /* button hover */
  --sa-primary-active:  #052f59;  /* button pressed / darkest */
  --sa-primary-contrast:#ffffff;  /* text/icons on primary */
  --sa-primary-tint:    #e9f0f8;  /* light fill: selected rows, subtle badges, hovers */
  --sa-primary-tint-2:  #cfe0f0;  /* stronger tint: borders on tinted fills */

  /* Accent (links, focus highlights) */
  --sa-accent:          #1a6fc4;
  --sa-focus-ring:      rgba(7, 61, 114, 0.35);

  /* Neutrals */
  --sa-ink:             #14202e;  /* primary text (deep navy-charcoal) */
  --sa-nav-ink:         #111111;  /* sidebar nav labels — black, not blue */
  --sa-ink-muted:       #5a6875;  /* secondary text, captions */
  --sa-ink-subtle:      #8b97a4;  /* placeholders, disabled text */
  --sa-bg:              #f5f7fa;  /* app background */
  --sa-surface:         #ffffff;  /* cards, panels, table rows */
  --sa-surface-alt:     #fafbfc;  /* zebra striping, subtle panels */
  --sa-border:          #e2e7ee;  /* default borders/dividers */
  --sa-border-strong:   #cbd3dd;  /* inputs, emphasized borders */

  /* Status / pipeline states */
  --sa-success:         #137a43;  --sa-success-bg: #e4f3ea;  /* approved / OK */
  --sa-warning:         #9a6700;  --sa-warning-bg: #fbf0d6;  /* pending / needs review */
  --sa-danger:          #b42318;  --sa-danger-bg:  #fbe9e7;  /* rejected / error */
  --sa-info:            var(--sa-primary); --sa-info-bg: var(--sa-primary-tint); /* discovered / published */
  --sa-neutral-bg:      #eef1f5;  --sa-neutral-fg: #5a6875;  /* scored / drafted / generic chip */

  /* Radius */
  --sa-radius-sm: 6px;
  --sa-radius:    8px;
  --sa-radius-lg: 12px;
  --sa-radius-pill: 999px;

  /* Elevation */
  --sa-shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.06);
  --sa-shadow-md: 0 4px 12px rgba(20, 32, 46, 0.10);

  /* Spacing scale (4px base) */
  --sa-space-1: 4px;  --sa-space-2: 8px;  --sa-space-3: 12px;
  --sa-space-4: 16px; --sa-space-5: 24px; --sa-space-6: 32px; --sa-space-8: 48px;
}

/* ------------------------------------------------------------------ *
 * Base — apply via `.sa-scope` on the app body and admin-page wrappers
 * ------------------------------------------------------------------ */
.sa-scope {
  font-family: var(--sa-font-sans);
  color: var(--sa-ink);
  background: var(--sa-bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sa-scope h1, .sa-scope h2, .sa-scope h3, .sa-scope h4 {
  color: var(--sa-ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--sa-space-3);
}
.sa-scope a { color: var(--sa-accent); text-decoration: none; }
.sa-scope a:hover { text-decoration: underline; }
.sa-scope code, .sa-scope kbd { font-family: var(--sa-font-mono); }

/* Primary button pattern */
.sa-scope .sa-btn {
  font-family: var(--sa-font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: var(--sa-space-2) var(--sa-space-4);
  border-radius: var(--sa-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.sa-scope .sa-btn--primary { background: var(--sa-primary); color: var(--sa-primary-contrast); }
.sa-scope .sa-btn--primary:hover { background: var(--sa-primary-hover); }
.sa-scope .sa-btn--primary:active { background: var(--sa-primary-active); }
.sa-scope .sa-btn--ghost { background: transparent; color: var(--sa-primary); border-color: var(--sa-border-strong); }
.sa-scope .sa-btn--ghost:hover { background: var(--sa-primary-tint); }

/* Focus ring (accessibility) */
.sa-scope :focus-visible {
  outline: 2px solid var(--sa-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sa-focus-ring);
}

/* Status chip pattern — map pipeline statuses to these */
.sa-scope .sa-chip {
  display: inline-flex; align-items: center;
  padding: 2px var(--sa-space-2);
  border-radius: var(--sa-radius-pill);
  font-size: 12px; font-weight: 500;
  background: var(--sa-neutral-bg); color: var(--sa-neutral-fg);
}
.sa-scope .sa-chip--success { background: var(--sa-success-bg); color: var(--sa-success); }
.sa-scope .sa-chip--warning { background: var(--sa-warning-bg); color: var(--sa-warning); }
.sa-scope .sa-chip--danger  { background: var(--sa-danger-bg);  color: var(--sa-danger); }
.sa-scope .sa-chip--info    { background: var(--sa-info-bg);    color: var(--sa-primary); }