/* Devoted — Color tokens
   Palette sampled from the brand badge: cream canvas, dusty blue, soft pink,
   plus two supporting accents (a deep slate-blue for text/contrast and a warm
   gold echoing the crown motif). */
:root {
  /* --- Brand core --- */
  --blue-500: #8caac7;   /* dusty cornflower — the badge field */
  --blue-600: #6f92b4;
  --blue-700: #567aa0;
  --blue-800: #3f5f80;   /* deep slate — headings, contrast */
  --blue-900: #2c4661;
  --blue-300: #b3c6dc;
  --blue-200: #d3dfeb;
  --blue-100: #e7eef5;

  --pink-500: #e7b3bd;   /* soft rose — the wordmark */
  --pink-600: #d999a6;
  --pink-700: #c67e8e;
  --pink-400: #efc6ce;
  --pink-300: #f4dae0;
  --pink-200: #f9eaee;
  --pink-100: #fcf4f6;

  /* Warm gold accent — crown / royalty motif, used sparingly */
  --gold-500: #c9a56a;
  --gold-600: #b28f52;
  --gold-300: #e0c99b;
  --gold-100: #f3ead7;

  /* --- Canvas neutrals (warm paper) --- */
  --cream-50:  #f6f1e9;
  --cream-100: #efe7da;   /* primary page canvas */
  --cream-200: #e6dccf;   /* the badge backdrop */
  --cream-300: #d8ccbb;
  --cream-400: #c3b4a0;

  --ink-900: #2b2620;   /* warm near-black text */
  --ink-700: #4c453b;
  --ink-500: #6f665a;
  --ink-300: #9a9082;
  --white:    #ffffff;

  /* --- Semantic aliases --- */
  --bg-canvas:      var(--cream-100);
  --bg-canvas-soft: var(--cream-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--cream-200);
  --surface-brand:  var(--blue-500);
  --surface-brand-soft: var(--blue-100);
  --surface-accent: var(--pink-300);

  --text-heading:   var(--blue-800);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-brand:  var(--pink-200);   /* pink-on-blue, as in the badge */
  --text-on-accent: var(--blue-800);
  --text-inverse:   var(--white);

  --border-soft:    var(--cream-300);
  --border-brand:   var(--blue-300);
  --border-strong:  var(--blue-800);

  --accent:         var(--pink-500);
  --accent-strong:  var(--pink-700);
  --accent-gold:    var(--gold-500);

  --link:        var(--blue-700);
  --link-hover:  var(--blue-900);

  --focus-ring:  var(--blue-600);

  /* Semantic status (harmonised to the warm palette) */
  --success: #6f9a72;
  --warning: var(--gold-600);
  --danger:  #c06b6b;
}