/* SkyMailr brand tokens — the single source of truth for the product's visual
   identity, mirroring the marketing site (skymailr.com).

   SOURCE OF TRUTH: the `skymailr-website` repo, public/assets/styles.css `:root`.
   Keep these values in sync with that file; do not diverge per surface. Every
   SkyMailr surface (marketing, academy, customer app, auth) should resolve its
   colours and brand to these variables so the whole product reads as one theme. */
:root {
  --bg: #f5f8fd;           /* page background */
  --ink: #0f172a;          /* headings / strong text */
  --text: #44506a;         /* body text */
  --muted: #64748b;        /* secondary text */
  --subtle: #94a3b8;       /* faint text / icons */
  --border: #e7ecf4;       /* hairlines */
  --border-strong: #d4ddec;/* emphasised borders, hover */
  --card: #ffffff;         /* surfaces */
  --brand: #3b82f6;        /* blue */
  --brand-ink: #2563eb;    /* blue, text-on-light */
  --indigo: #4f46e5;       /* gradient end */
  --sky: #38bdf8;          /* gradient start */
  --panel: #0c1326;        /* dark showcase panels (intentional accents) */
  --panel-border: rgba(255, 255, 255, 0.08);

  /* Brand gradients, reused by buttons / logo / accents. */
  --brand-gradient: linear-gradient(135deg, #3b82f6, #4f46e5);
  --logo-gradient: linear-gradient(135deg, #38bdf8 0%, #3b82f6 55%, #4f46e5 100%);

  /* Faint scattered-envelope pattern layered behind app + marketing surfaces
     (a tiling data-URI SVG, so no extra asset to load or hash). */
  --mail-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%233b82f6' stroke-opacity='0.09' stroke-width='1.4'%3E%3Cg transform='translate(18 24) rotate(-8)'%3E%3Crect width='40' height='27' rx='3'/%3E%3Cpath d='M0 4 L20 17 L40 4'/%3E%3C/g%3E%3Cg transform='translate(120 78) rotate(7)'%3E%3Crect width='40' height='27' rx='3'/%3E%3Cpath d='M0 4 L20 17 L40 4'/%3E%3C/g%3E%3Cg transform='translate(60 138) rotate(-4)'%3E%3Crect width='40' height='27' rx='3'/%3E%3Cpath d='M0 4 L20 17 L40 4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}