/* ============================================================
   Polaris-inspired design tokens (Shopify admin, light theme)
   Used as the visual framework for AAU Social CRM.
   Values mirror Polaris v12 token semantics.
   ============================================================ */

:root {
  /* ---- Surfaces / background ---- */
  --p-bg: #f1f1f1;               /* app frame background */
  --p-bg-surface: #ffffff;       /* card / sheet */
  --p-bg-surface-secondary: #f7f7f7;
  --p-bg-surface-tertiary: #f3f3f3;
  --p-bg-surface-hover: #fafafa;
  --p-bg-surface-active: #f1f1f1;
  --p-bg-surface-selected: #ebf3ff;

  /* ---- Text ---- */
  --p-text: #303030;
  --p-text-secondary: #616161;
  --p-text-subdued: #8a8a8a;
  --p-text-disabled: #b5b5b5;
  --p-text-on-fill: #ffffff;
  --p-text-brand-on-bg: #4a4a4a;

  /* ---- Borders ---- */
  --p-border: #e3e3e3;
  --p-border-secondary: #ebebeb;
  --p-border-strong: #8a8a8a;
  --p-border-hover: #cdcdcd;
  --p-border-focus: #005bd3;

  /* ---- Icon ---- */
  --p-icon: #4a4a4a;
  --p-icon-secondary: #8a8a8a;

  /* ---- Brand fill (primary action = near-black in modern Polaris) ---- */
  --p-fill-brand: #303030;
  --p-fill-brand-hover: #1a1a1a;
  --p-fill-brand-active: #000000;
  --p-fill-brand-disabled: #e3e3e3;

  /* ---- Shopify green (legacy accent, success emphasis) ---- */
  --p-green: #008060;
  --p-green-hover: #006e52;

  /* ---- Status (badge tones) ---- */
  --p-info-text: #00527c;        --p-info-bg: #d6ecff;     --p-info-border:#a5cfff;
  --p-success-text: #014b40;     --p-success-bg: #cdfee1;  --p-success-border:#92e6b5;
  --p-warning-text: #5e4200;     --p-warning-bg: #ffeec2;  --p-warning-border:#f5c451;
  --p-critical-text: #8e1f0b;    --p-critical-bg: #ffd9d2; --p-critical-border:#ffa996;
  --p-magic-text: #573b8a;       --p-magic-bg: #ece4ff;    --p-magic-border:#cda5ff;
  --p-neutral-text: #4a4a4a;     --p-neutral-bg: #e3e3e3;  --p-neutral-border:#cdcdcd;

  /* ---- Channel accents (social) ---- */
  --ch-messenger: #0084ff;
  --ch-zalo: #0068ff;
  --ch-instagram: #d62976;
  --ch-tiktok: #010101;
  --ch-email: #616161;

  /* ---- Radius ---- */
  --p-radius-100: 4px;
  --p-radius-200: 8px;
  --p-radius-300: 12px;
  --p-radius-400: 16px;
  --p-radius-full: 999px;

  /* ---- Shadows ---- */
  --p-shadow-card: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --p-shadow-button: 0 1px 0 rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.10);
  --p-shadow-button-primary: 0 1px 0 rgba(0,0,0,0.10), inset 0 -1px 0 rgba(0,0,0,0.20);
  --p-shadow-popover: 0 4px 12px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.04);
  --p-shadow-bevel: inset 0 0 0 1px rgba(0,0,0,0.06);

  /* ---- Spacing (4px base) ---- */
  --p-space-50: 2px;
  --p-space-100: 4px;
  --p-space-200: 8px;
  --p-space-300: 12px;
  --p-space-400: 16px;
  --p-space-500: 20px;
  --p-space-600: 24px;
  --p-space-800: 32px;
  --p-space-1000: 40px;

  /* ---- Type ---- */
  --p-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --p-font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* ---- Layout ---- */
  --nav-width: 232px;
  --topbar-height: 56px;
}