/* ============================================================
   Mera Sunaar — Color tokens
   Warm-cream fintech palette: rose primary + 24K gold accent.
   Base values first, then semantic aliases.
   ============================================================ */
:root {
  /* ---- Rose (primary brand) ---- */
  --rose-50:  #fff0f5;
  --rose-100: #ffe0ec;
  --rose-200: #ffc2d8;
  --rose-300: #ff9bbd;
  --rose-400: #ff77a4;
  --rose-500: #ff5a8d; /* brand primary */
  --rose-600: #ea3f76; /* primary hover / press */
  --rose-700: #c62d5f;
  --rose-800: #99244a;

  /* ---- Gold (24K accent) ---- */
  --gold-50:  #fff8e8;
  --gold-100: #fdefc8;
  --gold-200: #fadf92;
  --gold-300: #f7cd63;
  --gold-400: #f4b347; /* brand gold */
  --gold-500: #e19a24;
  --gold-600: #d98a13; /* gold hover / text-on-light */
  --gold-700: #b76e0b;
  --gold-800: #8a5207;

  /* ---- Ink / neutrals (warm-tinted) ---- */
  --ink-900: #16131c; /* footer / darkest surface */
  --ink-800: #1d1b22; /* dark panels */
  --ink-700: #180f1e; /* headings */
  --ink-600: #1f1722; /* body text */
  --ink-500: #6f6474; /* soft text */
  --ink-400: #9a8fa1;
  --ink-300: #c9bcc9;

  /* ---- Cream surfaces ---- */
  --cream-0:  #ffffff; /* card surface */
  --cream-50: #fff9f6; /* page base */
  --cream-100:#fff4ef; /* raised warm */
  --cream-150:#fff0f5; /* raised rose */
  --line:     #f1dfe6; /* hairline border */
  --line-strong: #e7cdd8;

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--cream-50);
  --surface-card:        var(--cream-0);
  --surface-warm:        var(--cream-100);
  --surface-rose:        var(--cream-150);
  --surface-dark:        var(--ink-800);
  --surface-darkest:     var(--ink-900);

  --text-heading:        var(--ink-700);
  --text-body:           var(--ink-600);
  --text-soft:           var(--ink-500);
  --text-on-dark:        rgba(255, 255, 255, 0.86);
  --text-on-dark-soft:   rgba(255, 255, 255, 0.66);

  --brand-primary:       var(--rose-500);
  --brand-primary-press: var(--rose-600);
  --brand-gold:          var(--gold-400);
  --brand-gold-ink:      var(--gold-700);

  --border-subtle:       var(--line);
  --border-strong:       var(--line-strong);

  --focus-ring:          rgba(255, 90, 141, 0.45);

  /* ---- Signature gradients ---- */
  --grad-primary:  linear-gradient(135deg, var(--rose-500) 0%, var(--rose-600) 100%);
  --grad-gold:     linear-gradient(135deg, var(--gold-300) 0%, var(--gold-600) 100%);
  --grad-rose-gold:linear-gradient(135deg, #ff7aa5 0%, var(--gold-400) 100%);
  --grad-tile:     linear-gradient(135deg, #fff1d7 0%, #ffdce9 100%); /* @kind color */
  --grad-tile-rose:linear-gradient(135deg, #fff2df 0%, #fff0f5 100%); /* @kind color */
  --grad-dark:     linear-gradient(180deg, #1e1724 0%, #130f17 100%); /* @kind color */
  --grad-page:     radial-gradient(circle at top right, rgba(255, 90, 141, 0.10), transparent 26%),
                   radial-gradient(circle at top left, rgba(244, 179, 71, 0.12), transparent 22%),
                   linear-gradient(180deg, #fffaf8 0%, #fff7fb 100%); /* @kind color */
}