/* Social Europe Desk — design tokens
   Source: Social Europe Design System + Desk additions (--desk-*).
   Import once at app root. Do not hard-code these values in components. */
:root {
  /* Brand */
  --se-red: #d0253c;
  --se-red-hover: #b31f34;
  --se-red-active: #9c1b2d;
  --se-black: #191919;
  --se-white: #ffffff;

  /* Neutrals */
  --se-gray-700: #4a4a4a;
  --se-gray-500: #767676;
  --se-gray-300: #d9d4d1;
  --se-gray-200: #eae5e2;
  --desk-gray-100: #f3efec;
  --se-beige: #faf6f4;

  /* Semantic tints (bg / text) */
  --tint-info-bg: #eff7fb;      --tint-info-text: #1f4f6b;      /* scheduled */
  --tint-success-bg: #e7f2ee;   --tint-success-text: #1d5e48;   /* ready, publish verdict */
  --tint-attention-bg: #fbefef; --tint-attention-text: #9c1b2d; /* revise, open fact checks */
  --tint-neutral-bg: #f3efec;   --tint-neutral-text: #4a4a4a;   /* in edit, counts */
  --tint-approved-bg: #fdf3d7;  --tint-approved-text: #6b4f00;  /* author approved — your turn */
  --desk-live: #2e8a67;                                         /* live / synced dot */

  /* Roles */
  --text: var(--se-black);
  --text-secondary: var(--se-gray-700);
  --text-muted: var(--se-gray-500);
  --accent: var(--se-red);
  --surface-page: var(--se-white);
  --surface-bar: var(--se-beige);
  --surface-tint: var(--se-beige);
  --surface-editor: var(--se-beige);
  --border: var(--se-gray-200);
  --border-control: var(--se-gray-300);
  --border-strong: var(--se-black);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-kicker: 12px; --fs-meta: 14px; --fs-ui: 15px; --fs-body: 19px;
  --fs-item: 24px; --fs-h2: 24px; --fs-h1: 44px; --fs-article-h1: 46px;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.85;
  --tracking-caps: 0.1em;

  /* Space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --content-width: 1120px;
  --rail-width: 380px;
  --action-col: 216px;

  /* Shape */
  --r-input: 2px; --r: 4px; --r-sheet: 12px; --r-pill: 999px;
  --shadow-dialog: 0 4px 16px rgba(25, 25, 25, 0.10);
  --scrim: rgba(25, 25, 25, 0.5);

  /* Motion */
  --t: 120ms ease;

  /* Controls */
  --h-btn: 44px; --h-btn-sm: 40px; --h-chip: 36px; --h-pill: 28px; --h-status: 24px; --h-count: 22px;
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 32px; --fs-item: 20px; --fs-article-h1: 30px; --fs-body: 18px;
    --h-chip: 38px; --h-pill: 26px;
  }
}