/* ============================================================
   SAUCE WRITING — COLOR TOKENS
   Sampled from the brand logo: a deep aubergine "ink" paired
   with a warm "sauce" gradient (cream → peach → rose → lilac).
   ============================================================ */
:root {
  /* ---- Ink (primary dark — text, outlines, filled buttons) ---- */
  --ink-900: #190933;   /* exact wordmark / outline color   */
  --ink-800: #241147;
  --ink-700: #341b5e;
  --ink-600: #4a2c79;
  --ink-500: #5f3f8f;

  /* ---- Warm paper / neutral surfaces ---- */
  --paper:   #fffaf4;   /* warm off-white page background    */
  --cream:   #fff2e6;   /* soft peach-cream panel             */
  --white:   #ffffff;
  --sand-100: #f6efe7;  /* hairline / muted fill on paper     */
  --sand-200: #ece2d6;  /* borders on warm surfaces           */
  --sand-300: #d9cbbb;

  /* ---- Neutral greys (cool, for UI chrome on white) ---- */
  --grey-50:  #f7f6f9;
  --grey-100: #efedf3;
  --grey-200: #e3dfe9;
  --grey-300: #cfc8da;
  --grey-400: #a79cb8;
  --grey-500: #7d7191;
  --grey-600: #574b6d;

  /* ---- The Sauce gradient stops (the heart of the brand) ---- */
  --sauce-cream:   #ffeedd;
  --sauce-peach:   #ffd6bb;
  --sauce-apricot: #fbc4a0;
  --sauce-rose:    #f2a7c1;
  --sauce-pink:    #ec9fc4;
  --sauce-lilac:   #cda6e0;
  --sauce-violet:  #b493d6;

  /* ---- Pastel tints (badges, section washes, hover fills) ---- */
  --tint-peach: #ffe7d4;
  --tint-rose:  #fbdfe9;
  --tint-lilac: #efe2f8;
  --tint-mint:  #dff1ea;   /* rare cool accent for success    */

  /* ---- Accents (interactive: links, focus, highlights) ---- */
  --grape-600: #6f3aa6;   /* AA on white — links, focus ring  */
  --grape-500: #8a4fc4;
  --grape-400: #a06fd6;
  --coral-600: #d35f3a;   /* warm highlight derived from peach */
  --coral-500: #e8754c;

  /* ---- Semantic status ---- */
  --success: #2f9e6e;
  --warning: #d98a2b;
  --danger:  #d8493f;
  --info:    var(--grape-500);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --text-strong:  var(--ink-900);
  --text-body:    #2c2042;
  --text-muted:   var(--grey-600);
  --text-subtle:  var(--grey-500);
  --text-inverse: #fff6ef;
  --text-link:    var(--grape-600);

  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-cream:   var(--cream);
  --surface-sunken:  var(--grey-50);
  --surface-ink:     var(--ink-900);
  --surface-tint:    var(--tint-lilac);

  --border-soft:   var(--sand-200);
  --border-default:var(--grey-200);
  --border-strong: var(--ink-900);

  --focus-ring: var(--grape-500);

  /* Signature brand gradients */
  --gradient-sauce: linear-gradient(105deg, var(--sauce-peach) 0%, var(--sauce-apricot) 22%, var(--sauce-rose) 55%, var(--sauce-lilac) 85%, var(--sauce-violet) 100%);
  --gradient-sauce-soft: linear-gradient(120deg, var(--tint-peach) 0%, var(--tint-rose) 50%, var(--tint-lilac) 100%);
  --gradient-ink: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
}