/* ============================================================
   STUDIO MAHFA — COLOR TOKENS
   Vintage-70s palette drawn from the brand mood board: sun-baked
   maroon + mustard accents against warm black/charcoal, with
   terracotta, sage and blush as secondary supporting hues pulled
   from the reference illustrations (Mesopotamian relief, tribal
   doorway pattern, isometric adobe buildings).
   ============================================================ */

:root {
  /* ---- Base neutrals (warm, never pure) ---- */
  --black-100: #14100d;   /* near-black, warm undertone — primary text/bg */
  --black-90:  #221c17;
  --grey-80:   #3a332c;
  --grey-60:   #5c5348;
  --grey-40:   #948a7c;
  --grey-20:   #c9beac;
  --paper-10:  #efe6d6;   /* warm paper/cream — primary light surface */
  --paper-05:  #f7f1e6;   /* lightest cream, near-white */

  /* ---- Brand accent: maroon ---- */
  --maroon-100: #4a0f16;
  --maroon-90:  #6b1420;  /* primary maroon — hero panels, CTA */
  --maroon-70:  #8a2230;
  --maroon-30:  #e7c9c6;  /* tinted maroon surface */

  /* ---- Brand accent: mustard ---- */
  --mustard-100: #9c6a12;
  --mustard-90:  #d99e2b; /* primary mustard — accents, highlights */
  --mustard-70:  #e0b355;
  --mustard-30:  #f3e3bd;

  /* ---- Secondary: terracotta ---- */
  --terracotta-90: #bd5a2e;
  --terracotta-70: #d97b46;
  --terracotta-30: #f0d2bd;

  /* ---- Secondary: sage ---- */
  --sage-90: #8a9a7a;
  --sage-70: #a9b79a;
  --sage-30: #dde3d3;

  /* ---- Secondary: blush ---- */
  --blush-90: #d98f78;
  --blush-70: #eab4a0;
  --blush-30: #f6ded3;

  /* =========================================================
     SEMANTIC ALIASES — use these in product/UI work
     ========================================================= */

  /* Surfaces */
  --surface-page:      var(--paper-05);
  --surface-card:      var(--paper-10);
  --surface-inverse:   var(--black-100);
  --surface-maroon:    var(--maroon-90);
  --surface-mustard:   var(--mustard-90);
  --surface-sunken:    var(--grey-20);

  /* Text */
  --text-primary:      var(--black-100);
  --text-secondary:    var(--grey-60);
  --text-muted:        var(--grey-40);
  --text-on-dark:      var(--paper-05);
  --text-on-maroon:    var(--paper-05);
  --text-on-mustard:   var(--black-100);

  /* Borders */
  --border-default:    var(--black-100);
  --border-subtle:     var(--grey-20);
  --border-on-dark:    var(--grey-60);

  /* Interactive */
  --action-primary:        var(--maroon-90);
  --action-primary-hover:  var(--maroon-70);
  --action-primary-active: var(--maroon-100);
  --action-secondary:      var(--mustard-90);
  --action-secondary-hover:var(--mustard-70);
  --focus-ring:            var(--mustard-90);

  /* Accents for tags/badges/highlights, rotate through these */
  --accent-1: var(--maroon-90);
  --accent-2: var(--mustard-90);
  --accent-3: var(--terracotta-90);
  --accent-4: var(--sage-90);
  --accent-5: var(--blush-90);
}