/*
 * EasySocial admin design tokens.
 * Source of truth for colour, type, radius, shadow and motion.
 * The theme is set on <html data-theme="light|dark"> before first paint.
 * Brand values come from easysocial.io (logo #32C5FF, site blue #03A2FF,
 * gradient #22D3EE -> #3A8DFF -> #1D4FD8, navy #070B27 / #0C1440).
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --es-bg: #f3f5fb;
  --es-surface: #ffffff;
  --es-surface-2: #f7f9fd;
  --es-surface-3: #eef2f9;
  --es-border: #e3e8f2;
  --es-border-strong: #cbd3e1;
  --es-overlay: rgba(7, 11, 39, 0.45);

  /* Text (all pass WCAG AA on --es-surface and --es-bg) */
  --es-text: #0c1440;
  --es-text-2: #44506b;
  --es-text-3: #636d88;
  --es-link: #2660f5;
  --es-link-hover: #1d4fd8;

  /* Brand */
  --es-brand: #32c5ff;
  --es-brand-strong: #03a2ff;
  --es-primary: #2660f5;
  --es-primary-hover: #1d4fd8;
  --es-primary-text: #ffffff;
  --es-primary-soft: #e8efff;
  --es-primary-soft-text: #1d4fd8;
  --es-gradient: linear-gradient(135deg, #22d3ee 0%, #3a8dff 45%, #1d4fd8 100%);
  --es-gradient-button: linear-gradient(135deg, #2a67f5 0%, #1d4fd8 100%);

  /* Product identities: Engage = conversations, Emerge = AI creative */
  --es-engage: #3b82f6;
  --es-engage-text: #1d4fd8;
  --es-engage-soft: #e8f0ff;
  --es-emerge: #a855f7;
  --es-emerge-text: #7e22ce;
  --es-emerge-soft: #f5ebff;

  /* Status (text colour / soft background) */
  --es-success: #15803d;
  --es-success-solid: #16a34a;
  --es-success-soft: #dcfce7;
  --es-warning: #b45309;
  --es-warning-solid: #ff6f00;
  --es-warning-soft: #ffedd5;
  --es-danger: #dc2626;
  --es-danger-solid: #dc2626;
  --es-danger-soft: #fee2e2;
  --es-info: #0369a1;
  --es-info-solid: #0284c7;
  --es-info-soft: #e0f2fe;
  --es-new: #e2f705; /* lime: "new" badges, always with navy text */
  --es-new-text: #0c1440;

  /* Navigation (navy in both themes) */
  --es-nav-bg: #070b27;
  --es-nav-bg-2: #0c1440;
  --es-nav-border: rgba(255, 255, 255, 0.07);
  --es-nav-text: #c7d0e6;
  --es-nav-text-muted: #8590b3;
  --es-nav-hover-bg: rgba(255, 255, 255, 0.06);
  --es-nav-active-bg: rgba(50, 197, 255, 0.14);
  --es-nav-active-text: #ffffff;
  --es-nav-accent: #32c5ff;

  /* Elevation */
  --es-shadow-sm: 0 1px 2px rgba(12, 20, 64, 0.06);
  --es-shadow: 0 1px 2px rgba(12, 20, 64, 0.05), 0 8px 24px -12px rgba(12, 20, 64, 0.14);
  --es-shadow-lg: 0 12px 32px -8px rgba(12, 20, 64, 0.22), 0 2px 6px rgba(12, 20, 64, 0.08);
  --es-focus-ring: 0 0 0 3px rgba(50, 197, 255, 0.4);
}

[data-theme="dark"] {
  color-scheme: dark;

  --es-bg: #070c1c;
  --es-surface: #0e1530;
  --es-surface-2: #121a38;
  --es-surface-3: #18224a;
  --es-border: #1f2a52;
  --es-border-strong: #2c3966;
  --es-overlay: rgba(2, 4, 12, 0.65);

  --es-text: #e8ecf8;
  --es-text-2: #b4bdd6;
  --es-text-3: #8c96b4;
  --es-link: #7cb0ff;
  --es-link-hover: #a5c8ff;

  --es-primary: #2660f5;
  --es-primary-hover: #3a75ff;
  --es-primary-text: #ffffff;
  --es-primary-soft: rgba(58, 141, 255, 0.16);
  --es-primary-soft-text: #a5c8ff;

  --es-engage: #60a5fa;
  --es-engage-text: #93c5fd;
  --es-engage-soft: rgba(59, 130, 246, 0.16);
  --es-emerge: #c084fc;
  --es-emerge-text: #d8b4fe;
  --es-emerge-soft: rgba(168, 85, 247, 0.16);

  --es-success: #4ade80;
  --es-success-solid: #16a34a;
  --es-success-soft: rgba(34, 197, 94, 0.14);
  --es-warning: #fdba74;
  --es-warning-solid: #ff6f00;
  --es-warning-soft: rgba(255, 111, 0, 0.16);
  --es-danger: #f87171;
  --es-danger-solid: #dc2626;
  --es-danger-soft: rgba(239, 68, 68, 0.16);
  --es-info: #7dd3fc;
  --es-info-solid: #0284c7;
  --es-info-soft: rgba(14, 165, 233, 0.16);

  --es-nav-bg: #050818;
  --es-nav-bg-2: #0a1030;
  --es-nav-border: rgba(255, 255, 255, 0.06);

  --es-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --es-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --es-shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}

:root {
  /* Type */
  --es-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --es-font-display: "Poppins", "Roboto", system-ui, sans-serif;
  --es-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --es-text-xs: 12px;
  --es-text-sm: 13px;
  --es-text-base: 14px;
  --es-text-md: 15px;
  --es-text-lg: 18px;
  --es-text-xl: 22px;
  --es-text-2xl: 28px;
  --es-text-3xl: 36px;

  /* Radius */
  --es-radius-xs: 6px;
  --es-radius-sm: 8px;
  --es-radius: 12px;
  --es-radius-lg: 16px;
  --es-radius-pill: 999px;

  /* Spacing (4 px grid) */
  --es-space-1: 4px;
  --es-space-2: 8px;
  --es-space-3: 12px;
  --es-space-4: 16px;
  --es-space-5: 20px;
  --es-space-6: 24px;
  --es-space-8: 32px;

  /* Shell */
  --es-sidebar-w: 256px;
  --es-sidebar-w-collapsed: 72px;
  --es-topbar-h: 64px;

  /* Motion */
  --es-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --es-dur-fast: 120ms;
  --es-dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --es-dur-fast: 0ms;
    --es-dur: 0ms;
  }
}