/**
 * SendyKit Design Tokens (Spec 19 §2)
 * Source of truth: Sendy dark theme computed values
 * Used by: admin UI, sendykit.dev, WP plugin, purchase form
 */

:root {
  /* ── Backgrounds ── */
  --sk-bg: #1d1d1d;
  --sk-bg-nav: #1a1a1c;
  --sk-bg-sidebar: #292929;
  --sk-bg-surface: #292929;
  --sk-bg-input: transparent;
  --sk-bg-hover: rgba(255,255,255,.06);
  --sk-bg-active: rgba(255,255,255,.08);

  /* ── Text ── */
  --sk-fg: #ffffff;
  --sk-fg-secondary: #dfdfdf;
  --sk-fg-muted: #d1d1d6;
  --sk-fg-dim: #999999;

  /* ── Borders ── */
  --sk-border: #333333;
  --sk-border-light: #444444;
  --sk-border-nav: #999999;

  /* ── Accent (Gold) ── */
  --sk-accent: #C4A265;
  --sk-accent-hover: #b8923c;
  --sk-accent-text: #C4A265;
  --sk-accent-glow: rgba(196,162,101,.12);

  /* ── Status ── */
  --sk-success: #4ade80;
  --sk-danger: #de5351;
  --sk-warning: #f0ad4e;
  --sk-info: #5bc0de;

  /* ── Shape ── */
  --sk-radius: 5px;
  --sk-radius-lg: 8px;
  --sk-topbar-h: 52px;
  --sk-sidebar-w: 200px;

  /* ── Shadows ── */
  --sk-shadow: 0 1px 4px rgba(0,0,0,.15);
  --sk-shadow-lg: 0 4px 16px rgba(0,0,0,.3);

  /* ── Typography ── */
  --sk-font: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sk-font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --sk-font-size: 14px;

  /* ── Short aliases (used by admin page inline styles) ── */
  --sk-ac: var(--sk-accent);
  --sk-ac-hover: #B08D4E;
  --sk-bg-surf: var(--sk-bg-surface);
  --sk-fg-sec: var(--sk-fg-secondary);
  --sk-fg-mut: var(--sk-fg-muted);
}

/* Upgrade Gate (Spec 14 §17.4) */
.sk-upgrade-gate{background:var(--sk-bg-surface);border:1px solid var(--sk-border);border-radius:var(--sk-radius-lg);padding:24px;text-align:center;margin:12px 16px}
.sk-upgrade-gate .sk-gate-icon{width:32px;height:32px;margin:0 auto 12px;opacity:.5;border:2px solid var(--sk-fg-muted);border-radius:50%;display:flex;align-items:center;justify-content:center}
.sk-upgrade-gate .sk-gate-icon::after{content:'';width:12px;height:16px;border:2px solid var(--sk-fg-muted);border-radius:2px;display:block}
.sk-upgrade-gate h4{font-size:14px;color:var(--sk-fg);margin:0 0 8px}
.sk-upgrade-gate p{font-size:13px;color:var(--sk-fg-muted);margin:0 0 16px;max-width:320px;margin-left:auto;margin-right:auto}
.sk-upgrade-gate .sk-gate-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sk-upgrade-gate .btn-upgrade{background:var(--sk-accent);color:var(--sk-bg);border:none;padding:8px 20px;border-radius:var(--sk-radius);font-size:13px;font-weight:600;cursor:pointer}
.sk-upgrade-gate .btn-learn{background:none;border:1px solid var(--sk-border);color:var(--sk-fg-muted);padding:8px 20px;border-radius:var(--sk-radius);font-size:13px;cursor:pointer}