/* ===========================================================================
   AIlin — Color tokens
   ---------------------------------------------------------------------------
   System: "Ink & Paper". Speech becomes ink on premium, warm paper.
   - Paper: warm off-white surfaces (never pure cold white)
   - Ink: near-black, warm-toned text
   - Brand: deep ink navy (primary actions, brand)
   - Accent: amber highlighter (editorial highlight — used sparingly)
   =========================================================================== */

:root {
  /* ---- Paper (warm neutral surfaces, light → deep) ---- */
  --paper-0:  #FFFFFF; /* pure white — rare, for media/avatars */
  --paper-50: #FCFAF5; /* app background */
  --paper-100:#F7F2E9; /* sunken / striping */
  --paper-200:#EFE8DA; /* hairline fills */
  --paper-300:#E5DCCB; /* borders, dividers */
  --paper-400:#D4C8B2; /* strong border */

  /* ---- Ink (warm near-black text + greys) ---- */
  --ink-900: #1A1813; /* primary text, near-black */
  --ink-700: #423D34; /* strong secondary */
  --ink-500: #6E6859; /* muted text / icons */
  --ink-400: #938C7B; /* placeholder / faint */
  --ink-300: #B9B1A0; /* disabled text */

  /* ---- Brand: ink navy ---- */
  --navy-900: #141E33;
  --navy-800: #1B2A45;
  --navy-700: #233456; /* brand base */
  --navy-600: #2F4470;
  --navy-500: #3D568A;
  --navy-100: #DEE4EF; /* tint fill */
  --navy-50:  #EEF1F8; /* faint tint */

  /* ---- Accent: amber highlighter ---- */
  --amber-700: #9C5A14;
  --amber-600: #C0791F; /* accent base */
  --amber-500: #D9922F;
  --amber-300: #F0C77E;
  --amber-200: #F7E1B4;
  --amber-100: #FBEFD4; /* highlight wash (transcript marker) */

  /* ---- Semantic hues ---- */
  --green-600: #2C7A57; --green-100: #DCEDE4;
  --red-600:   #B23A33; --red-100:   #F6DED9;
  --blue-600:  #2F6BB0; --blue-100:  #DCE8F5;

  /* =====================================================================
     Semantic aliases — reference these in components, not the raw scales
     ===================================================================== */

  /* Surfaces */
  --surface-app:      var(--paper-50);
  --surface-card:     var(--paper-0);
  --surface-sunken:   var(--paper-100);
  --surface-raised:   var(--paper-0);
  --surface-inverse:  var(--navy-800);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-disabled:  var(--ink-300);
  --text-onbrand:   #FBF7EF;
  --text-link:      var(--navy-600);

  /* Brand / action */
  --brand:          var(--navy-700);
  --brand-hover:    var(--navy-800);
  --brand-press:    var(--navy-900);
  --brand-tint:     var(--navy-50);
  --brand-tint-2:   var(--navy-100);

  /* Accent / highlight */
  --accent:         var(--amber-600);
  --accent-hover:   var(--amber-700);
  --accent-wash:    var(--amber-100);   /* transcript highlight background */
  --accent-strong:  var(--amber-700);

  /* Borders & lines */
  --border-subtle:  var(--paper-200);
  --border-default: var(--paper-300);
  --border-strong:  var(--paper-400);
  --border-focus:   var(--navy-500);

  /* Feedback */
  --success:        var(--green-600);  --success-tint: var(--green-100);
  --danger:         var(--red-600);    --danger-tint:  var(--red-100);
  --info:           var(--blue-600);   --info-tint:    var(--blue-100);
  --warning:        var(--amber-700);  --warning-tint: var(--amber-200);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--navy-500) 35%, transparent);
}