/* ==========================================================================
   COLORS — Andrine Mendez
   Bright yellow + warm greys + true black. Vox-editorial, high contrast.
   ========================================================================== */
:root {
  /* --- Brand: Signal Yellow --- */
  --yellow-100: #FFF7CC;
  --yellow-200: #FFEE8F;
  --yellow-300: #FFE24D;
  --yellow-400: #FFD400;   /* primary brand yellow */
  --yellow-500: #F5C400;
  --yellow-600: #D9A800;   /* hover / pressed on yellow */
  --yellow-700: #A87F00;

  /* --- Ink: warm near-blacks --- */
  --ink-900: #141312;      /* primary text / black surfaces */
  --ink-800: #232120;
  --ink-700: #34312F;

  /* --- Warm grey scale --- */
  --grey-50:  #F7F6F3;     /* page tint */
  --grey-100: #EFEEE9;
  --grey-200: #E2E0DA;     /* hairline borders */
  --grey-300: #CDCAC2;
  --grey-400: #A8A49B;
  --grey-500: #7C7871;     /* muted text */
  --grey-600: #56534D;
  --grey-700: #37342F;

  --white: #FFFFFF;

  /* --- Semantic: status --- */
  --success: #2E7D46;
  --success-tint: #E4F1E7;
  --warning: #C97A00;
  --warning-tint: #FBEECF;
  --danger:  #C0392B;
  --danger-tint:  #F7E3E0;
  --info:    #2A5FB0;
  --info-tint:    #E1E9F5;

  /* ======================================================================
     SEMANTIC ALIASES — reference these in components
     ====================================================================== */
  --brand:            var(--yellow-400);
  --brand-hover:      var(--yellow-600);
  --on-brand:         var(--ink-900);   /* text on yellow */

  --bg-page:          var(--grey-50);
  --bg-canvas:        var(--white);
  --bg-inverse:       var(--ink-900);   /* black sections */
  --bg-muted:         var(--grey-100);

  --surface-card:     var(--white);
  --surface-raised:   var(--white);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-800);
  --text-muted:       var(--grey-500);
  --text-on-inverse:  var(--grey-50);
  --text-on-inverse-muted: var(--grey-400);

  --border-hairline:  var(--grey-200);
  --border-strong:    var(--ink-900);
  --border-focus:     var(--ink-900);

  --link:             var(--ink-900);
  --link-hover:       var(--yellow-700);
}