/* ============================================================
   Mo's Law Office — Color Tokens
   Brand DNA: classical gold (columns), deep ink, warm ivory.
   Trustworthy, warm, premium, personal.
   ============================================================ */
:root {
  /* ---- Brand: Gold (from the logo's gilded columns) ---- */
  --gold-50:  #FBF4E1;
  --gold-100: #F4E5BE;
  --gold-200: #E9D08A;
  --gold-300: #DCBA5E;
  --gold-400: #C9A24B;   /* primary gold */
  --gold-500: #B8862F;
  --gold-600: #9A6F28;
  --gold-700: #7A571F;
  --gold-800: #5A3F16;

  /* The signature gilded gradient (use sparingly: logo, accents, hairlines) */
  --gold-gradient: linear-gradient(135deg, #E8CD7B 0%, #C9A24B 45%, #9A6F28 100%); /* @kind color */
  --gold-gradient-soft: linear-gradient(135deg, #F4E5BE 0%, #DCBA5E 100%); /* @kind color */

  /* ---- Ink: deep blue-charcoal (authority, trust) ---- */
  --ink-900: #111A26;   /* near-black navy */
  --ink-800: #14202E;   /* primary dark surface */
  --ink-700: #1E2E40;
  --ink-600: #2C3F54;
  --ink-500: #44586E;
  --ink-400: #6B7C8F;

  /* ---- Warm neutrals (ivory paper, parchment) ---- */
  --paper:   #FAF7F0;   /* page background */
  --paper-2: #F2ECE0;   /* alt section / card tint */
  --paper-3: #E7DECB;   /* hairline tint on warm bg */
  --cream:   #FFFFFF;

  /* ---- Greys (on ivory) ---- */
  --grey-900: #20242B;
  --grey-700: #444A54;
  --grey-500: #6E7681;
  --grey-300: #B7B2A6;
  --grey-200: #D8D2C5;
  --grey-100: #ECE7DC;

  /* ---- Semantic states ---- */
  --success: #3F7D58;
  --success-bg: #E6F0E9;
  --warning: #B8862F;
  --warning-bg: #FAF0D8;
  --danger:  #A8453B;
  --danger-bg: #F6E5E3;
  --info:    #2C3F54;
  --info-bg: #E7ECF1;

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  --bg-page:        var(--paper);
  --bg-alt:         var(--paper-2);
  --surface-card:   var(--cream);
  --surface-dark:   var(--ink-800);
  --surface-tint:   var(--gold-50);

  --text-strong:    var(--ink-900);
  --text-body:      var(--grey-700);
  --text-muted:     var(--grey-500);
  --text-on-dark:   #F3EEE3;
  --text-on-dark-muted: #B6BECA;
  --text-gold:      var(--gold-600);

  --accent:         var(--gold-400);
  --accent-hover:   var(--gold-500);
  --accent-press:   var(--gold-600);

  --border-soft:    var(--paper-3);
  --border-default: var(--grey-200);
  --border-strong:  var(--grey-300);
  --border-gold:    var(--gold-300);

  --focus-ring:     color-mix(in srgb, var(--gold-400) 55%, transparent);
}