/* ==========================================================================
   Flowdesk — brand tokens
   --------------------------------------------------------------------------
   This is the customization layer. Everything you need to rebrand the
   template lives in this one :root block — colours, fonts, radii, shadows.
   Edit here; do not hunt through index.html.

   Loaded BEFORE the inline <style> in index.html, so these values feed
   every var() reference in the page.
   ========================================================================== */

:root{

  /* ---- Brand accents -----------------------------------------------------
     --indigo is the primary accent: CTAs, links, focus rings, kickers.
     --violet is the secondary accent, used with indigo in gradients.
     Change these two and the whole template re-skins.                       */
  --indigo:#4F46E5;
  --violet:#7C3AED;

  /* ---- Text -------------------------------------------------------------- */
  --ink:#0F172A;        /* headings + body text */
  --slate:#475569;      /* secondary text */
  --muted:#64748B;      /* captions, meta, muted labels */

  /* ---- Surfaces ---------------------------------------------------------- */
  --white:#fff;         /* page background + card surfaces */
  --soft:#EEF2FF;       /* tinted accent surface (kicker pills, soft fills) */
  --soft-2:#F8FAFC;     /* alternating section background */
  --line:#E2E8F0;       /* borders, rules, dividers */

  /* ---- Typography --------------------------------------------------------
     The Google Fonts <link> in index.html <head> loads Inter. If you swap
     --font-sans for another family, update that <link> to match.            */
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:Georgia,'Times New Roman',serif;   /* one logo-wall wordmark */

  /* ---- Shape ------------------------------------------------------------- */
  --radius:1rem;        /* cards, inputs, buttons */
  --radius-lg:1.5rem;   /* large panels, feature blocks */

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,.07),0 10px 24px -6px rgba(15,23,42,.10);
  --shadow-lg:0 24px 60px -12px rgba(79,70,229,.22),0 8px 24px -8px rgba(15,23,42,.14);
}