/* ============================================================
   TAMGA — Color tokens
   Two modes drawn from the book's identity:
   · DARK "poster" mode  — near-black grounds, metallic gold
     linework, warm amber light, emerald (ЖУЗ) accent, warm white.
   · LIGHT "map" mode     — parchment grounds, sepia ink monochrome.
   Base ramps first, then semantic aliases.
   ============================================================ */
:root {
  /* ---- Ink / ground ramp (warm near-blacks) ---- */
  --ink-900: #0b0a08;   /* deepest field — poster background          */
  --ink-850: #100e0b;
  --ink-800: #16140f;   /* primary surface                            */
  --ink-700: #1d1a14;   /* raised surface / card                      */
  --ink-600: #262219;   /* elevated / hover                           */
  --ink-500: #322c20;   /* hairline on dark, divider                  */
  --ink-400: #463d2c;

  /* ---- Gold / bronze metallic ramp ---- */
  --gold-900: #5a4021;  /* deep bronze shadow                         */
  --gold-800: #7a5829;
  --gold-700: #9a7038;  /* bronze                                     */
  --gold-600: #b88c45;
  --gold-500: #c9a25a;  /* the core linework gold                     */
  --gold-400: #ddb96e;
  --gold-300: #e8c87a;  /* bright gold (titles, glow)                 */
  --gold-200: #f2dca6;  /* champagne highlight                        */
  --gold-100: #f8eccb;

  /* ---- Emerald accent (ЖУЗ green) ---- */
  --emerald-900: #0c2e26;
  --emerald-700: #135042;
  --emerald-500: #1f9e7a;  /* core accent                             */
  --emerald-400: #2bb78f;
  --emerald-300: #46d3a8;  /* glow / hover                            */

  /* ---- Warm whites / neutrals on dark ---- */
  --paper-100: #f6f1e6;  /* warm display white                        */
  --paper-200: #e9dfca;  /* body on dark                              */
  --paper-300: #c2b496;  /* secondary on dark                         */
  --paper-400: #8c7f63;  /* muted on dark                             */
  --paper-500: #6a5f48;  /* faint on dark                             */

  /* ---- Parchment ramp (light map mode) ---- */
  --parch-100: #faf4e8;
  --parch-200: #f4ecdb;  /* primary light ground                      */
  --parch-300: #ece0c8;  /* raised light surface                      */
  --parch-400: #ddcca8;  /* hairline on light                         */

  /* ---- Sepia ink ramp (light map ink) ---- */
  --sepia-900: #3a2410;
  --sepia-700: #5c3a1c;  /* primary ink on parchment                  */
  --sepia-500: #7c5631;  /* the map linework brown                    */
  --sepia-300: #a6845c;  /* secondary sepia                           */
  --sepia-200: #c4a982;  /* muted sepia                               */

  /* ============================================================
     SEMANTIC ALIASES  — default theme is DARK (poster)
     ============================================================ */
  --bg-base:        var(--ink-900);
  --bg-surface:     var(--ink-800);
  --bg-raised:      var(--ink-700);
  --bg-elevated:    var(--ink-600);
  --bg-hover:       var(--ink-600);

  --text-primary:   var(--paper-200);
  --text-display:   var(--paper-100);
  --text-secondary: var(--paper-300);
  --text-muted:     var(--paper-400);
  --text-faint:     var(--paper-500);

  --accent:         var(--gold-500);   /* metallic gold — primary brand */
  --accent-bright:  var(--gold-300);
  --accent-soft:    var(--gold-700);
  --accent-2:       var(--emerald-500);/* emerald — secondary / "ЖУЗ"   */
  --accent-2-bright:var(--emerald-300);

  --line:           var(--ink-500);    /* hairline divider on dark      */
  --line-strong:    var(--gold-900);   /* bronze rule / ornamental frame*/
  --line-gold:      var(--gold-600);   /* visible gold hairline frame   */

  --field-bg:       var(--ink-700);
  --field-border:   var(--ink-400);
  --field-focus:    var(--gold-500);

  /* On-accent text (sits on gold fill) */
  --on-accent:      var(--ink-900);

  /* Signature gradients */
  --grad-gold: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-400) 38%, var(--gold-700) 100%);
  --grad-gold-h: linear-gradient(90deg, var(--gold-700) 0%, var(--gold-300) 50%, var(--gold-700) 100%);
  --grad-ray: linear-gradient(180deg, rgba(232,200,122,0) 0%, rgba(200,146,62,0.10) 45%, rgba(232,200,122,0.55) 100%); /* @kind color */
  --grad-field: radial-gradient(120% 90% at 50% 12%, #1a1711 0%, var(--ink-900) 70%); /* @kind color */
  --grad-emerald-glow: radial-gradient(60% 60% at 50% 50%, rgba(43,183,143,0.35) 0%, rgba(12,46,38,0) 72%); /* @kind color */
}

/* ------------------------------------------------------------
   LIGHT "map" theme — parchment + sepia. Apply on a container:
   <div class="theme-parchment"> … </div>
   ------------------------------------------------------------ */
.theme-parchment {
  --bg-base:        var(--parch-200);
  --bg-surface:     var(--parch-100);
  --bg-raised:      var(--parch-300);
  --bg-elevated:    var(--parch-300);
  --bg-hover:       var(--parch-300);

  --text-primary:   var(--sepia-700);
  --text-display:   var(--sepia-900);
  --text-secondary: var(--sepia-500);
  --text-muted:     var(--sepia-300);
  --text-faint:     var(--sepia-200);

  --accent:         var(--sepia-500);
  --accent-bright:  var(--sepia-700);
  --accent-soft:    var(--sepia-300);

  --line:           var(--parch-400);
  --line-strong:    var(--sepia-300);
  --line-gold:      var(--sepia-300);

  --field-bg:       var(--parch-100);
  --field-border:   var(--parch-400);
  --field-focus:    var(--sepia-500);
  --on-accent:      var(--parch-100);
}