/* =========================================================================
   Tender — Design Tokens
   Colors, type, spacing, radius, shadow, motion.
   Editorial-meets-modern. Warm, calm, money-positive.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ---------------------------------------------------------------------
     COLOR — Primitive scales
     The palette is grounded in three families:
       Ink    — warm near-blacks for type & UI structure
       Paper  — warm creams for backgrounds (never pure white)
       Forest — deep evergreen as the primary brand color
     Plus two accents (Terracotta, Gold) and a careful semantic set.
     --------------------------------------------------------------------- */

  /* Ink — warm neutral, slight green undertone, never pure black */
  --ink-50:  #F4F2EE;
  --ink-100: #E6E2DA;
  --ink-200: #CFC9BD;
  --ink-300: #A8A192;
  --ink-400: #7A7466;
  --ink-500: #524E43;
  --ink-600: #38352D;
  --ink-700: #25231D;
  --ink-800: #1A1814;
  --ink-900: #0F0E0B;

  /* Paper — warm cream backgrounds */
  --paper-0:   #FBF8F1;  /* lightest, app bg */
  --paper-50:  #F6F1E5;  /* default surface bg */
  --paper-100: #EFE8D7;  /* raised surface */
  --paper-200: #E5DCC7;  /* hairline / divider */

  /* Forest — primary brand */
  --forest-50:  #E8EFE9;
  --forest-100: #C8D8CB;
  --forest-200: #94B49C;
  --forest-300: #5E8A6A;
  --forest-400: #3C6647;
  --forest-500: #244A30;   /* brand */
  --forest-600: #1B3825;
  --forest-700: #14291B;
  --forest-800: #0D1B12;

  /* Terracotta — primary accent (warmth, alerts that aren't scary) */
  --terracotta-50:  #FAEDE6;
  --terracotta-100: #F3D2C2;
  --terracotta-200: #E6A488;
  --terracotta-300: #D97757;
  --terracotta-400: #B85A3C;
  --terracotta-500: #8F4127;

  /* Gold — secondary accent (premium, rewards, growth) */
  --gold-50:  #F8EFD7;
  --gold-100: #EFD9A0;
  --gold-200: #DCB860;
  --gold-300: #B58A2E;
  --gold-400: #8A6720;

  /* Semantic */
  --success-bg:   #DDEBDB;
  --success-fg:   #244A30;   /* uses forest */
  --warning-bg:   #F8EAC8;
  --warning-fg:   #6B4E0E;
  --danger-bg:    #F3D6CB;
  --danger-fg:    #7A2E1A;
  --info-bg:      #DCE3EC;
  --info-fg:      #2A3D55;

  /* ---------------------------------------------------------------------
     SEMANTIC color tokens — use these, not the primitives
     --------------------------------------------------------------------- */
  --bg:           var(--paper-0);
  --bg-raised:    var(--paper-50);
  --bg-sunken:    var(--paper-100);
  --surface:      #FFFDF7;     /* card bg, slightly brighter than paper */
  --surface-alt:  var(--paper-50);

  --fg:           var(--ink-800);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-faint:     var(--ink-300);
  --fg-on-brand:  var(--paper-0);

  --border:        var(--paper-200);
  --border-strong: var(--ink-200);
  --border-focus:  var(--forest-500);

  --brand:        var(--forest-500);
  --brand-hover:  var(--forest-600);
  --brand-press:  var(--forest-700);
  --brand-soft:   var(--forest-50);

  --accent:       var(--terracotta-300);
  --accent-hover: var(--terracotta-400);
  --accent-soft:  var(--terracotta-50);

  /* Money-direction colors — used for amounts. Forest for incoming,
     ink for outgoing (NEVER red — money out is normal, not an error). */
  --money-in:     var(--forest-500);
  --money-out:    var(--ink-800);
  --money-neutral:var(--ink-500);

  /* ---------------------------------------------------------------------
     TYPE — Families
     Display: Instrument Serif (editorial italic-leaning serif)
     Body:    Geist (modern geometric sans, neutral and crisp)
     Mono:    Geist Mono (for amounts, codes, tabular data)
     --------------------------------------------------------------------- */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — modest scale, tight at the bottom for dense data */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  88px;
  --text-6xl:  128px;

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------------------------------------------------------------------
     SPACING — 4px base, loose at the top end
     --------------------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------------------------------------------------------------------
     RADIUS — Generous but not bubbly. Card = 16px is the workhorse.
     --------------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;   /* default card */
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOW — Warm, low, never grey-rgba. All shadows tint slightly green.
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 0 0 rgba(36, 74, 48, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(36, 74, 48, 0.05),
               0 1px 1px 0 rgba(36, 74, 48, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(36, 74, 48, 0.06),
               0 2px 4px -1px rgba(36, 74, 48, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(36, 74, 48, 0.10),
               0 4px 8px -2px rgba(36, 74, 48, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(36, 74, 48, 0.16),
               0 8px 16px -4px rgba(36, 74, 48, 0.08);

  /* Inner shadow used on inputs / sunken surfaces */
  --shadow-inset: inset 0 1px 2px 0 rgba(36, 74, 48, 0.06);

  /* ---------------------------------------------------------------------
     MOTION — Calm. No bounce. Short durations.
     --------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

  --duration-fast:   140ms;
  --duration-normal: 220ms;
  --duration-slow:   360ms;
}

/* =========================================================================
   SEMANTIC TYPE STYLES — apply via class. h1/h2/etc are convenience.
   ========================================================================= */

.display-hero,
.tender-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

.tender-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.tender-h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.tender-h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.tender-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.tender-body-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.tender-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.tender-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.tender-amount {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.tender-amount-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--fg);
}

.tender-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* =========================================================================
   BASE RESET helpers
   ========================================================================= */
.tender-reset {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}