/* =====================================================================
   theme-gifto.css — Gifto v3 theme layer
   Load LAST, after vendor.bundle.css + style.css / style-1.css.
   Defines the palette as CSS variables and applies a clean,
   Gnosis-inspired polish (whitespace, rounded solid buttons,
   modern sans-serif). Recolouring the base happens via the
   var() references injected into style.css / style-1.css.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Raw palette */
  --color-1: #ea064e;
  --color-2: #aa507b;
  --color-3: #830c6b;
  --color-4: #584483;
  --color-5: #f1c3a7;

  /* Semantic aliases (used by refactored base CSS + components) */
  --gif-primary:   var(--color-1);
  --gif-secondary: var(--color-2);
  --gif-dark:      var(--color-3);
  --gif-accent:    var(--color-4);
  --gif-soft:      var(--color-5);

  --gif-gradient: linear-gradient(0.25turn, #ea064e, #aa507b, #830c6b, #584483, #f1c3a7);

  /* UI tokens */
  --gif-radius: 12px;
  --gif-font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Typography: clean, confident sans-serif --- */
body { font-family: var(--gif-font); }
h1, h2, h3, h4, h5, h6,
.pageath-heading, .card-title, .popup-title { font-family: var(--gif-font); font-weight: 700; }

/* --- Links / accent text --- */
a { color: var(--gif-primary); }
a:hover { color: var(--gif-dark); }
.text-primary { color: var(--gif-primary) !important; }
.text-carolina { color: var(--gif-primary) !important; }   /* admin accent */

/* New gifto logo is full-colour; whiten it on the coloured app topbar */
.topbar-logo img { filter: brightness(0) invert(1); height: 38px; width: auto; }

/* Dashboard balance-card icon: solid white disc so the brand mark stays crisp on the coloured card */
.token-balance-icon { background:#fff !important; box-shadow:0 6px 16px -6px rgba(0,0,0,.3); }
.token-balance-icon img { width:36px !important; height:auto; }

/* --- Buttons: solid fills, rounded corners (Gnosis feel) --- */
.btn { border-radius: var(--gif-radius); font-weight: 600; }
.btn-primary,
.btn-carolina {
  background: var(--gif-primary);
  border-color: var(--gif-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-carolina:hover {
  background: var(--gif-dark);
  border-color: var(--gif-dark);
}
.btn-outline.btn-light,
.btn-bordered { border-radius: var(--gif-radius); }

/* --- Cards / surfaces: soft, modular --- */
.card,
.token-information,
.modal-content { border-radius: calc(var(--gif-radius) + 4px); }

/* --- Brand utilities --- */
.gif-gradient { background: var(--gif-gradient); }
.gif-gradient-text {
  background: var(--gif-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gif-accent-bar { height: 4px; background: var(--gif-gradient); border: 0; }