/* ============================================================
   Leavely — Design System tokens
   One shared source of truth for the app and the web tool.
   Everything is anchored to the "L" logo (#6D28D9).
   Identical copy ships in both products.
   ============================================================ */
:root {
  /* ---- Brand violet ramp ---- */
  --ll-violet-900: #3b1a78;
  --ll-violet-800: #4c1d95;
  --ll-violet-700: #6d28d9;   /* PRIMARY — matches logo & theme-color */
  --ll-violet-600: #7c3aed;
  --ll-violet-500: #8b5cf6;
  --ll-violet-400: #a78bfa;
  --ll-violet-300: #c4b5fd;
  --ll-violet-200: #ddd6fe;
  --ll-violet-100: #ede9fe;
  --ll-violet-50:  #f6f3fe;

  /* ---- Ink & neutrals (faint violet cast, never cold grey) ---- */
  --ll-text:         #2e2748;
  --ll-body:         #4a4463;
  --ll-body-slate:   #334155;  /* long-form reading text on the web tool */
  --ll-muted:        #6b6486;
  --ll-faint:        #a89fc0;
  --ll-line:         #ece3fb;
  --ll-canvas:       #faf8ff;  /* app scroll surface */
  --ll-canvas-lilac: #eee9fb;  /* web tool immersive backdrop */
  --ll-card:         #ffffff;

  /* ---- Functional palette (fixed jobs only) ---- */
  --ll-teal:       #14b8a6;   /* secondary — bonding time */
  --ll-teal-deep:  #0d9488;   /* export / success */
  --ll-teal-light: #2dd4bf;
  --ll-teal-bg:    #d7f5ee;
  --ll-green:      #16a34a;   /* eligible / complete */
  --ll-amber:      #d97706;   /* deadlines / caution */
  --ll-amber-bg:   #fef3c7;
  --ll-rose:       #e11d48;   /* recovery / urgent / errors */
  --ll-pink:       #ec4899;
  --ll-rose-bg:    #fde7ef;
  --ll-indigo:     #4f46e5;   /* pre-leave / neutral notices */
  --ll-indigo-2:   #6366f1;
  --ll-indigo-bg:  #e0e7ff;

  /* ---- Secondary surfaces & text ---- */
  --ll-surface-2:      #f1edfb;   /* secondary button / soft panels */
  --ll-surface-3:      #f8f6fd;   /* helper / calc boxes */
  --ll-secondary-text: #5b4a8a;

  /* ---- Gradients ---- */
  --ll-gradient-primary:       linear-gradient(155deg, #9668f0, #7c3aed);
  --ll-gradient-primary-hover: linear-gradient(155deg, #a480f5, #8b46f0);
  --ll-gradient-status:        linear-gradient(140deg, #7c3aed, #6d28d9);
  --ll-gradient-teal:          linear-gradient(155deg, #2dd4bf, #0d9488);

  /* ---- Radii ---- */
  --ll-radius-sm:  10px;
  --ll-radius-md:  12px;
  --ll-radius-lg:  16px;
  --ll-radius-xl:  20px;
  --ll-radius-2xl: 24px;

  /* ---- Shadows ---- */
  --ll-shadow-card:   0 1px 2px rgba(76,29,149,.06), 0 12px 30px -16px rgba(109,40,217,.28);
  --ll-shadow-btn:    0 4px 14px -2px rgba(124,58,237,.45);
  --ll-shadow-status: 0 14px 34px -14px rgba(109,40,217,.55);

  /* ---- Spacing scale ---- */
  --ll-space-1: 4px;
  --ll-space-2: 8px;
  --ll-space-3: 12px;
  --ll-space-4: 16px;
  --ll-space-5: 22px;
  --ll-space-6: 32px;
}