/* =========================================================
   Cash-carta — design C1, variant A «жовта кнопка» (Nick, 2026-11-08)
   Token NAMES are inherited from the smartycash-ua design system so every
   rule in main.css keeps working; the VALUES are Cash-carta's. Mapping:
     --brand-green / -600 → the CTA yellow (#FFD43B — the wordmark dot) and hover
     --brand-green-700    → link / accent blue (#1560E0)
     --brand-ink          → navy ink (#0B1B3F): text, values, CTA text
     --brand-blue / -sky  → the band gradient (#1E7BF2 / #13B5F5)
     --brand-amber        → the wordmark dot (= the CTA yellow)
   ========================================================= */

@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-cyrillic-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-cyrillic-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-cyrillic-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-cyrillic-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* ----- Brand colors ----- */
  --brand-ink: #0B1B3F;        /* navy ink — headings, values, CTA text */
  --brand-green: #FFD43B;      /* CTA yellow (ink on it 11.8:1) */
  --brand-green-600: #F5C518;  /* CTA hover */
  --brand-green-700: #1560E0;  /* link / accent blue (5.6:1 on white) */
  --brand-green-50: #E3EEFF;
  --brand-green-100: #CFE1FF;

  --brand-blue: #1E7BF2;       /* band gradient, deep end */
  --brand-sky: #13B5F5;        /* band gradient, light end */
  --brand-amber: #FFD43B;      /* wordmark dot */
  --brand-green-tag: #1560E0;  /* «Рекомендуємо» pill text / ring */

  /* ----- Neutrals (paper → ink) ----- */
  --ink-1000: #0B1B3F;         /* darkest text */
  --ink-900: #14244A;
  --ink-700: #3F4C6B;
  --ink-500: #5E6B88;          /* body secondary, tile labels (5.3:1) */
  --ink-400: #94A0B8;          /* placeholder, captions */
  --ink-300: #C9D5E8;          /* borders strong */
  --ink-200: #DCE6F5;          /* borders default, tile outline */
  --ink-100: #EAF0F9;          /* surface alt */
  --ink-50:  #F6F9FD;          /* surface */
  --paper:   #FFFFFF;

  /* ----- Semantic foreground / background ----- */
  --bg:          #F2F6FC;      /* page, cool blue-grey */
  --bg-alt:      var(--ink-50);
  --bg-section:  #E8EFF9;       /* tinted section, one step below the page */
  --bg-dark:     var(--brand-ink);
  --fg-1:        var(--ink-1000);
  --fg-2:        var(--ink-700);
  --fg-3:        var(--ink-500);
  --fg-muted:    var(--ink-400);
  --fg-on-dark:  #FFFFFF;
  --fg-on-brand: #FFFFFF;
  --border:      var(--ink-200);
  --border-strong: var(--ink-300);

  /* ----- State colors ----- */
  --success: #22C55E;
  --success-bg: #ECFDF3;
  --warning: #F59E0B;
  --warning-bg: #FFFBEB;
  --danger:  #EF4444;
  --danger-bg: #FEF2F2;
  --info:    #3B82F6;
  --info-bg: #EFF6FF;

  /* ----- Radii ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ----- Shadows / elevation ----- navy-tinted; flat design uses them sparingly */
  --shadow-xs: 0 1px 2px rgba(11, 27, 63, 0.05);
  --shadow-sm: 0 2px 6px rgba(11, 27, 63, 0.06), 0 1px 2px rgba(11, 27, 63, 0.04);
  --shadow-md: 0 10px 24px -10px rgba(11, 27, 63, 0.18), 0 2px 4px rgba(11, 27, 63, 0.04);
  --shadow-lg: 0 20px 40px -14px rgba(11, 27, 63, 0.22), 0 4px 8px rgba(11, 27, 63, 0.05);
  --shadow-cta: none;
  --ring-focus: 0 0 0 3px rgba(21, 96, 224, 0.40);

  /* ----- Spacing scale (4px grid) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----- Type families ----- */
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Rubik', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- Type scale ----- */
  --fs-hero: clamp(40px, 5vw, 64px);
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 13px;
}

/* ===== Base ===== */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); }
body { font-size: var(--fs-body); font-weight: 500; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* ===== Semantic type ===== */
.hero, .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
h1, .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.015em; color: var(--brand-ink); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; color: var(--brand-ink); }
h3, .h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; color: var(--brand-ink); }
h4, .h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; color: var(--brand-ink); }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--fg-2); font-weight: 500; }
p, .body { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }
small, .small { font-size: var(--fs-sm); color: var(--fg-3); }
.caption { font-size: var(--fs-xs); color: var(--fg-3); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-green-700);
}
.amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
a { color: var(--brand-green-700); text-decoration: none; }
a:hover { text-decoration: underline; }