/* ============================================================================
   Stamp Card — Brand colour system (single source of truth)
   ----------------------------------------------------------------------------
   Every colour used across the site is defined here as a CSS custom property.
   Pages reference these with var(--token); they no longer hard-code hex values.
   To change a colour everywhere, edit it ONCE in this file.

   Loaded on every page via:  <link rel="stylesheet" href="/assets/css/brand.css">

   NOTE: CSS variables do NOT work in <meta name="theme-color"> tags or inside
   <canvas> (ctx.fillStyle). Those few spots still use literal hex — search the
   codebase for "theme-color" and the confetti array in stamp.php if you rebrand
   the primary/accent colour.
   ============================================================================ */

:root {
  /* ---- Primary: Indigo (the workhorse — nav, headers, buttons, links) ---- */
  --indigo-50:  #EEEDFB;
  --indigo-100: #DAD7F6;
  --indigo-200: #B8B2EC;
  --indigo-300: #9089E1;
  --indigo-400: #6C61D6;
  --indigo-500: #5546CE;
  --indigo-600: #FF6700;  /* BASE — brand primary */
  --indigo-700: #372DA6;
  --indigo-800: #2C2483;
  --indigo-900: #221B66;

  /* ---- Accent: Gold (the spotlight — earned stamps, rewards, highlights) ---- */
  --gold-50:  #FEF6E7;
  --gold-100: #FDE9C3;
  --gold-200: #FBD489;
  --gold-300: #F9C155;
  --gold-400: #F7B23A;
  --gold-500: #F5A623;  /* BASE — brand accent */
  --gold-600: #D98A0E;
  --gold-700: #B06E0B;
  --gold-800: #8A5309;  /* value in use for dark-on-gold text */
  --gold-900: #5E3A06;

  /* ---- Neutrals (text, borders, surfaces) ---- */
  --gray-50:  #F8F8F7;
  --gray-100: #EFEEEB;
  --gray-200: #DEDCD6;
  --gray-300: #C3C1B8;
  --gray-400: #9E9C93;
  --gray-500: #7A7871;
  --gray-600: #5A5954;
  --gray-700: #43423E;
  --gray-800: #2C2C2A;
  --gray-900: #1A1A19;

  /* ---- Semantic (status) ---- */
  --success: #2E9E5B;
  --warning: #E8730C;   /* kept visually distinct from gold so warnings aren't read as rewards */
  --danger:  #D64545;
  --info:    #2F80ED;

  /* ---- Status surface tints (recurring alert/banner backgrounds) ---- */
  --success-bg:     #E8F5E9;
  --success-border: #C8E6C9;
  --danger-bg:      #FBEAEA;
  --danger-border:  #EFC0C0;
  --gold-tint:      #FDECD3;

  /* ---- Purpose tokens (reference these in NEW components) ---- */
  --brand-primary:        var(--indigo-600);
  --brand-primary-hover:  var(--indigo-700);
  --brand-primary-active: var(--indigo-800);
  --brand-accent:         var(--gold-500);
  --brand-accent-hover:   var(--gold-600);

  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-400);
  --text-on-indigo:  #FFFFFF;
  --text-on-gold:    var(--gold-900);   /* dark text on gold — never white */

  --surface-page:    var(--gray-50);
  --surface-card:    #FFFFFF;
  --border:          var(--gray-200);
  --border-strong:   var(--gray-300);

  /* ---- Two-tone scheme: ORANGE accent + DARK-GREY primary buttons ----
     --indigo-600 (currently #FF6700 orange) is the ACCENT: headers, links,
     ghost-button outlines, stamp dots, progress bars, toggles, focus borders.
     Solid primary buttons (Log in / Submit / etc.) use the grey tokens below.
     Change a button colour for everyone by editing these two lines. */
  --btn-primary-bg:     #3D3B37;   /* solid primary buttons */
  --btn-primary-hover:  #292825;   /* their hover / pressed state */
  --hero-gradient-end:  #292825;   /* dark end of the orange hero gradients */
}

/* ---- Shared components ----
   This file is otherwise tokens-only. `.home-link` lives here because the six
   login/register pages (merchant, customer, reseller × login/register) each carry
   their own <style> block — one shared class beats six copies drifting apart. */

/* "Back to home" link shown under the card on the login/register pages. */
.home-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 20px auto 0; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-card);
  font-size: 13px; font-weight: 500; font-family: inherit;
  color: var(--text-secondary); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.home-link:hover { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--surface-page); }
.home-link i { font-size: 16px; }
/* The pages centre their card with flex/margin auto — this keeps the pill centred too. */
.home-link-wrap { width: 100%; text-align: center; }