/* ===========================================================
 * Skyll design tokens — single source of truth.
 * Loaded on every page before any page-specific stylesheet.
 *
 * Pages MAY override individual tokens (e.g. .messages-app uses
 * a slightly off-white background), but must not redeclare the
 * brand palette.
 * =========================================================== */

:root {
  /* --- Surfaces & text ---------------------------------- */
  --bg: #ffffff;
  --panel: #ffffff;
  --soft: #f6f6f6;
  --text: #1a1d21;
  --muted: #6b7280;
  --border: #e5e7eb;
  --border-strong: #cfd6df;

  /* --- Shape & shadow ---------------------------------- */
  --radius: 1rem;
  --radius-sm: 0.7rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 9999px;
  --shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 14px 44px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 1px 6px rgba(15, 23, 42, 0.18);
  --shadow-composer: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* --- Brand palette — navy + pastel blue + white ------- */
  --brand-navy: #34487a;
  --brand-navy-strong: #2a3a64;
  --brand-pastel: #c3d4e3;
  --brand-pastel-soft: #e6eef5;
  --brand-white: #ffffff;

  /* --- Typography -------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}