/* ============================================================
   Mereke — Color tokens
   Festive Kazakh palette: deep berry red, signal red, warm
   amber/gold, paper cream, charcoal ink.
   Sampled from the corporate presentation.
   ============================================================ */

:root {
  /* ---- Reds (the festive core) ---------------------------- */
  --red-900: #5E1416;   /* darkest — deep shadow on red panels */
  --red-800: #7D1D1E;   /* hero / title — deep berry brick red */
  --red-700: #9E2220;   /* rich red panel                      */
  --red-600: #C2161B;   /* scarlet — section dividers          */
  --red-500: #D81E2C;   /* signal red — headings, buttons      */
  --red-400: #E84150;   /* hover / lighter signal              */
  --red-100: #FBE4E2;   /* tint — chip fills, soft surfaces    */

  /* ---- Amber & gold (the warm glow) ----------------------- */
  --amber-600: #E2693B; /* ember — gradient deep end           */
  --amber-500: #F2A14E; /* core amber — logo, accents          */
  --amber-400: #F7B968; /* light amber                         */
  --amber-300: #FBD79C; /* pale amber wash                     */
  --gold-600:  #B98318; /* metallic gold — fine ornament lines */
  --gold-500:  #C9941F; /* gold accent                         */

  /* ---- Cream / paper neutrals ----------------------------- */
  --cream-50:  #FBF7F1; /* lightest paper                      */
  --cream-100: #F7F2EC; /* page background — primary paper     */
  --cream-200: #F1E9DF; /* warm panel                          */
  --cream-300: #EFE7DA; /* product-tile / warm card fill       */
  --cream-400: #E4D8C6; /* hairline / divider on cream         */

  /* ---- Ink (text) ----------------------------------------- */
  --ink-900: #241F1B;   /* near-black warm charcoal            */
  --ink-700: #3A332D;   /* primary text                        */
  --ink-500: #6B6258;   /* muted / secondary text              */
  --ink-300: #9B9286;   /* faint / disabled                    */
  --white:   #FFFFFF;

  /* ========================================================
     Semantic aliases — author UI against THESE
     ======================================================== */

  /* Surfaces */
  --surface-page:       var(--cream-100); /* default page paper   */
  --surface-page-alt:   var(--cream-50);
  --surface-raised:     var(--white);     /* cards lifted off page*/
  --surface-warm:       var(--cream-300); /* product tiles        */
  --surface-red:        var(--red-600);   /* festive red panel    */
  --surface-red-deep:   var(--red-800);   /* hero / cover         */
  --surface-tint:       var(--red-100);   /* soft red chip        */

  /* Text */
  --text-primary:    var(--ink-700);
  --text-strong:     var(--ink-900);
  --text-muted:      var(--ink-500);
  --text-faint:      var(--ink-300);
  --text-accent:     var(--red-500);   /* red emphasis on cream   */
  --text-on-red:     var(--white);     /* body text on red panels */
  --text-on-red-mut: #F3D9D4;          /* muted text on red       */
  --text-amber:      var(--amber-500); /* amber headings on red   */

  /* Brand */
  --brand-red:    var(--red-500);
  --brand-amber:  var(--amber-500);
  --brand-gold:   var(--gold-500);
  --brand-cream:  var(--cream-100);

  /* Lines & borders */
  --border-warm:   var(--cream-400);
  --border-red:    var(--red-500);
  --border-amber:  var(--amber-500);
  --border-faint:  rgba(58, 51, 45, 0.12);

  /* Interactive */
  --focus-ring:   var(--amber-500);

  /* Festive gradient (section headers, glows) */
  --gradient-ember: linear-gradient(100deg, var(--amber-600) 0%, var(--amber-400) 60%, var(--amber-300) 100%);
  --gradient-red:   linear-gradient(160deg, var(--red-600) 0%, var(--red-800) 100%);
}