/* ===========================================================================
   THE HOWTO NETWORK — COLOR SYSTEM
   Ink + sky blue from the emblem, on warm editorial paper.
   Nine edition accents give the network its color-coded personality.
   =========================================================================== */
:root {
  /* --- Ink / neutral scale (warm charcoal, pulled from the emblem) --- */
  --ink-900: #211F1F;
  --ink-800: #2B2A29;
  --ink-700: #3C3A3B; /* emblem circle */
  --ink-600: #55514F;
  --ink-500: #726D6A;
  --ink-400: #9A938E;
  --ink-300: #C2BBB3;
  --ink-200: #E0D9CF;
  --ink-100: #EDE7DD;
  --ink-50:  #F6F1E9; /* warm paper */
  --white:   #FFFFFF;

  /* --- Sky blue (primary brand hue) --- */
  --sky-700: #3F6E96;
  --sky-600: #5C8BB2;
  --sky-500: #7FA9C9; /* primary */
  --sky-400: #93B2CB; /* emblem blue */
  --sky-300: #B4CCDE;
  --sky-200: #D5E3EE;
  --sky-100: #EAF1F7;

  /* --- Edition accents (the nine) --- */
  --ed-home:    #7FA9C9; /* sky blue       */
  --ed-food:    #C8453B; /* tomato         */
  --ed-beauty:  #C45C8A; /* rose           */
  --ed-travel:  #E2703A; /* sunset orange  */
  --ed-tech:    #5A57A6; /* indigo         */
  --ed-finance: #2F6B5E; /* deep teal      */
  --ed-family:  #E8B23A; /* marigold       */
  --ed-fashion: #7A4E8C; /* plum           */
  --ed-health:  #4C9A6F; /* sage green     */

  /* --- Functional / status --- */
  --success: #4C9A6F;
  --warning: #E8B23A;
  --danger:  #C8453B;
  --info:    #5C8BB2;

  /* ===== Semantic aliases ===== */
  --bg-page:        var(--ink-50);
  --bg-page-alt:    var(--ink-100);
  --surface-card:   var(--white);
  --surface-sunken: var(--ink-100);
  --surface-ink:    var(--ink-800);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-ink:    var(--ink-50);
  --text-on-accent: var(--white);

  --border-hair:    var(--ink-200);
  --border-strong:  var(--ink-700);
  --border-focus:   var(--sky-500);

  --brand:          var(--sky-500);
  --brand-strong:   var(--sky-700);
  --brand-soft:     var(--sky-100);
  --link:           var(--sky-700);
}