/*
 * FundWell brand tokens — extracted from "Fundwell Style Guide - 2026.pdf".
 * Components must consume the semantic vars (--bg, --fg, --accent, etc.), not
 * the raw --fw-* palette. The palette is the source; semantic vars are the API.
 */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Early Sans";
  src: url("/static/fonts/EarlySansVariable-Regular.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Early Sans";
  src: url("/static/fonts/EarlySansVariable-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Primary */
  --fw-blue:           #0043F2;
  --fw-dark-blue:      #0034BD;
  --fw-deep-current:   #4369CC;
  --fw-morning-drive:  #7FA1F8;
  --fw-light-gray:     #E6E6E6;
  --fw-white:          #FFFFFF;

  /* Secondary */
  --fw-sunlit:         #F8F4F0;
  --fw-champagne:      #F3E5AE;
  --fw-mint:           #38D9A9;
  --fw-green-velour:   #24BC8F;
  --fw-pink:           #FBAFF7;
  --fw-luminescent:    #F981F2;
  --fw-navy:           #012C59;
  --fw-dark-well:      #001428;
  --fw-royal-blue:     #180AFA;
  --fw-indigo:         #463BFB;
  --fw-purple:         #9F72FE;
  --fw-matt-purple:    #9067E5;

  /* Gradients (radial, off-center, per brand book) */
  --fw-ocean: radial-gradient(circle at 30% 30%, #180AFA 0%, #0043F2 45%, #7FA1F8 100%);
  --fw-moon:  radial-gradient(circle at 50% 50%, #FFFFFF 0%, #7FA1F8 100%);

  /* Surfaces specific to MP2's offer-presentation pattern.
     Sidebar + offer-card share the same light-blue tint, giving the merchant
     a clear "this is my offer" surface that sits on top of white. */
  --fw-page-sidebar: #E8EEFB;
  --fw-page-card:    #EEF2FC;

  /* Semantic ------------------------------------------------------- */
  --bg:             var(--fw-white);
  --bg-card:        var(--fw-sunlit);
  --bg-accent:      var(--fw-blue);
  --bg-muted:       var(--fw-light-gray);

  --fg:             var(--fw-dark-well);
  --fg-on-accent:   var(--fw-white);
  --fg-muted:       var(--fw-deep-current);

  --accent:         var(--fw-blue);
  --accent-hover:   var(--fw-dark-blue);
  --success:        var(--fw-green-velour);
  --success-bg:     #E6F8F0;
  --border:         var(--fw-light-gray);

  /* Status chip palette (per MP2 offer cards) */
  --chip-expiring-bg: #F8E2A7;
  --chip-expiring-fg: #5D3D00;
  --chip-accepted-bg: #C7EFD8;
  --chip-accepted-fg: #134E2E;
  --chip-declined-bg: var(--bg-muted);
  --chip-declined-fg: var(--fg-muted);

  /* Typography */
  --font-display: "Early Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --text-display: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --text-h1:      2rem;
  --text-h2:      1.5rem;
  --text-h3:      1.25rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-micro:   0.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii / shadows */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 24px rgba(0, 20, 40, 0.06);
}