/* ============================================================
   CALYX — COLOR TOKENS
   Botanical · Crystal-clear · Premium
   Base ramps first, semantic aliases below.
   ============================================================ */

:root {
  /* --- Ink / warm neutral ramp (linen-derived) ------------- */
  --ink-900: #15130F;   /* warm near-black — logo, primary text   */
  --ink-800: #29251C;
  --ink-700: #3A352B;
  --ink-600: #524B3D;
  --ink-500: #6B6355;   /* secondary text                          */
  --ink-400: #8C8270;
  --ink-300: #A89E8B;   /* muted text, disabled                    */
  --ink-200: #C8BFAC;

  /* --- Linen / cardstock surfaces -------------------------- */
  --linen-300: #D8CFBC;
  --linen-200: #E4DDCC;  /* hairline borders                       */
  --linen-100: #EFE9DA;  /* page tint                              */
  --linen-50:  #F4EFE3;  /* primary page background (warm ivory)   */
  --ivory:     #FBF8F0;  /* card / paper                           */
  --white:     #FFFFFF;

  /* --- Calyx green ramp (botanical core) ------------------- */
  --green-900: #14271D;  /* fern — darkest, dark surfaces          */
  --green-800: #1B3528;
  --green-700: #274536;  /* CALYX GREEN — primary brand            */
  --green-600: #325540;
  --green-500: #3E6450;  /* interactive green                      */
  --green-400: #547B66;
  --green-300: #6E8A6F;  /* sage                                   */
  --green-200: #A9C0AC;
  --green-100: #C9D8CB;  /* pale leaf                              */
  --green-50:  #E8EFE7;  /* faintest green wash                    */

  /* --- Brass (premium metal accent — sparing) -------------- */
  --brass-700: #735730;
  --brass-600: #8F6E3C;
  --brass-500: #A9854E;  /* etched-foil brass                      */
  --brass-400: #BE9D63;
  --brass-300: #D2B681;
  --brass-100: #EAD9B8;

  /* --- Acrylic / glass (crystal-clear motif) --------------- */
  --glass-tint:   #E2EAE7;  /* cool clear-acrylic body            */
  --glass-edge:   #C2D2CE;  /* refracted edge                     */
  --glass-light:  #F3F8F6;  /* lit highlight                      */
  --etch:         #C6C3BB;  /* laser-etched light grey (on acrylic)*/

  /* --- Status (muted, premium) ----------------------------- */
  --success: #3E6450;
  --warning: #A9854E;
  --danger:  #9F4A3B;   /* muted clay/terracotta                  */
  --info:    #4A6E72;   /* muted slate-teal                       */

  /* ========================================================
     SEMANTIC ALIASES — reach for these in components
     ======================================================== */
  --bg-page:        var(--linen-50);
  --bg-page-tint:   var(--linen-100);
  --bg-dark:        var(--green-900);
  --surface-card:   var(--ivory);
  --surface-raised: var(--white);
  --surface-sunken: var(--linen-100);
  --surface-glass:  color-mix(in srgb, var(--glass-tint) 70%, transparent);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-300);
  --text-on-dark:   var(--ivory);
  --text-on-dark-muted: var(--green-200);
  --text-brand:     var(--green-700);

  --border-hairline: var(--linen-200);
  --border-subtle:   var(--linen-300);
  --border-strong:   var(--ink-200);
  --border-brand:    var(--green-700);

  --accent:        var(--green-700);
  --accent-hover:  var(--green-800);
  --accent-press:  var(--green-900);
  --accent-soft:   var(--green-50);
  --metal:         var(--brass-500);
  --metal-soft:    var(--brass-100);

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

/* Dark / fern scope — for footers, hero panels, "etched-on-acrylic" UIs */
[data-theme="fern"] {
  --bg-page:        var(--green-900);
  --bg-page-tint:   var(--green-800);
  --surface-card:   var(--green-800);
  --surface-raised: var(--green-700);
  --surface-sunken: #102017;

  --text-primary:   var(--ivory);
  --text-secondary: var(--green-200);
  --text-muted:     #7E9485;
  --text-brand:     var(--green-100);

  --border-hairline: color-mix(in srgb, var(--green-100) 12%, transparent);
  --border-subtle:   color-mix(in srgb, var(--green-100) 20%, transparent);
  --border-strong:   color-mix(in srgb, var(--green-100) 32%, transparent);

  --accent:        var(--brass-500);
  --accent-hover:  var(--brass-400);
  --accent-press:  var(--brass-600);
  --accent-soft:   color-mix(in srgb, var(--brass-500) 16%, transparent);
}