/* ============================================================
   RPGadget — Color tokens
   "Marble & gold" scholar's-desk palette.
   Base ramps first, then semantic aliases. Never navy/blue/purple.
   ============================================================ */
:root {
  /* --- Base: shell & ink (charcoal / warm dark) --- */
  --ink-900: #201B11;   /* deepest shadow */
  --ink-800: #2A2418;   /* charcoal shell — app chrome */
  --ink-700: #3A3222;   /* raised dark surface */
  --ink-600: #4C4230;   /* dark border / divider */
  --ink-500: #6B6455;   /* muted dark text */

  /* --- Base: marble & parchment (light surfaces) --- */
  --marble-050: #FBF8F1; /* lightest marble */
  --marble-100: #F5F0E8; /* marble panel */
  --marble-200: #EDE6D6; /* marble, pressed / alt row */
  --marble-300: #E2D8C2; /* marble edge */
  --cream-100:  #F0E8C8; /* cream — highlighted parchment */
  --cream-200:  #E7DCB4; /* cream edge */

  /* --- Base: gold ramp --- */
  --gold-900: #6B4F00;  /* deep engraved gold */
  --gold-800: #8B6A00;  /* shadow gold */
  --gold-600: #A67C08;  /* gold hover */
  --gold-500: #C8960A;  /* gold — primary accent */
  --gold-400: #E8B82A;  /* bright gold */
  --gold-300: #FFE58A;  /* pale gilt / glow */
  --gold-200: #FFF0C0;  /* faint gold wash */

  /* --- Base: emerald (positive) --- */
  --emerald-700: #164A26;
  --emerald-600: #1B5E30;
  --emerald-500: #2D7A45;
  --emerald-300: #7FBF95;
  --emerald-100: #DCEEE2;

  /* --- Base: garnet (negative / danger) --- */
  --garnet-700: #6E1F1F;
  --garnet-600: #8A2A2A;
  --garnet-500: #B23A3A;
  --garnet-100: #F3DFDB;

  /* --- Base: amber (warning) shares gold family but warmer-red --- */
  --amber-600: #A9600C;
  --amber-500: #CC7A16;
  --amber-100: #F6E3C6;

  /* ==========================================================
     Semantic aliases — reference these in components
     ========================================================== */

  /* Surfaces */
  --surface-shell:      var(--ink-800);   /* app background / chrome */
  --surface-shell-deep: var(--ink-900);
  --surface-raised:     var(--ink-700);   /* dark cards on shell */
  --surface-panel:      var(--marble-100);/* marble panel/card */
  --surface-panel-alt:  var(--marble-200);/* zebra / pressed */
  --surface-panel-hi:   var(--cream-100); /* highlighted parchment */
  --surface-overlay:    var(--marble-050);

  /* Text */
  --text-on-dark:       var(--marble-100);
  --text-on-dark-muted: #C7BCA0;
  --text-body:          var(--ink-800);   /* ink on light */
  --text-muted:         var(--ink-500);
  --text-gold:          var(--gold-800);  /* gilt label on light */
  --text-inverse:       var(--marble-050);

  /* Accent / brand */
  --accent:             var(--gold-500);
  --accent-hover:       var(--gold-600);
  --accent-bright:      var(--gold-400);
  --accent-glow:        var(--gold-300);
  --accent-deep:        var(--gold-800);
  --on-accent:          var(--ink-900);   /* ink text on gold */

  /* Lines & ornament */
  --rule-gold:          var(--gold-500);
  --rule-gold-faint:    color-mix(in srgb, var(--gold-500) 45%, transparent);
  --border-light:       var(--marble-300);
  --border-dark:        var(--ink-600);

  /* Status */
  --positive:           var(--emerald-600);
  --positive-strong:    var(--emerald-700);
  --positive-soft:      var(--emerald-100);
  --danger:             var(--garnet-600);
  --danger-strong:      var(--garnet-700);
  --danger-soft:        var(--garnet-100);
  --warning:            var(--amber-500);
  --warning-strong:     var(--amber-600);
  --warning-soft:       var(--amber-100);
  --info:               var(--gold-800);
  --info-soft:          var(--gold-200);

  /* Focus */
  --focus-ring:         color-mix(in srgb, var(--gold-400) 70%, transparent);

  /* Overlays (no hardcoded rgba in components) */
  --hover-on-dark:      rgba(255, 255, 255, 0.05);
  --well-on-dark:       rgba(0, 0, 0, 0.22);

  /* ==========================================================
     Public screen-level API — the names screens reference.
     Reskin the app by overriding these (see tokens/themes.css).
     ========================================================== */
  --bg-base:        var(--ink-800);      /* charcoal shell */
  --bg-surface:     var(--marble-100);   /* marble panel */
  --bg-surface-alt: var(--cream-100);    /* cream highlight */
  --accent-soft:    color-mix(in srgb, var(--gold-500) 14%, transparent);
  --emerald:        var(--emerald-600);
  --emerald-light:  var(--emerald-500);
  --text-primary:   var(--text-body);
  --border:         var(--rule-gold-faint); /* gold at low opacity */
}