/* ============================================================================
   LINCE — Colors & Type Foundations
   Global B2B banking · fiat + stablecoins · cross-border payouts
   ----------------------------------------------------------------------------
   Brand typefaces — Schibsted Grotesk (display), Manrope (sans/UI), Space Mono
   (data). Self-hosted (latin subset, woff2) from assets/fonts/ — no third-party
   request, no Google Fonts dependency.
   ============================================================================ */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/manrope-400.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-600.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/manrope-700.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/manrope-800.woff2) format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/schibstedgrotesk-400.woff2) format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/schibstedgrotesk-500.woff2) format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/schibstedgrotesk-600.woff2) format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/schibstedgrotesk-700.woff2) format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/schibstedgrotesk-800.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/spacemono-400.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/spacemono-700.woff2) format('woff2');}

:root {
  /* ---------- BRAND : Lince Gold (the lynx gaze / signature) ---------- */
  --gold-300: #FFD488;   /* tints, glows                          */
  --gold-400: #FFC25A;   /* hover / bright accent                 */
  --gold-500: #F2A93C;   /* ★ SIGNATURE — CTAs, marks, highlights */
  --gold-600: #D98E22;   /* pressed / deep                        */
  --gold-700: #A96B17;   /* on-bone text accent                   */
  --gold-tint: rgba(242,169,60,0.12);   /* wash behind gold elements */

  /* ---------- INK : warm green-black (dark canvas) ---------- */
  --ink-900: #0E1411;    /* ★ base dark canvas                    */
  --ink-800: #141B17;    /* raised surface on dark                */
  --ink-700: #1B231E;    /* cards on dark                         */
  --ink-600: #232C27;    /* hover surface                         */
  --ink-500: #2E3933;    /* strokes / chips on dark               */

  /* ---------- BONE : warm paper (light canvas) ---------- */
  --bone-50:  #FBFAF6;   /* lightest surface                      */
  --bone-100: #F4F1E9;   /* ★ base paper canvas                   */
  --bone-200: #ECE7DB;   /* raised surface on bone                */
  --bone-300: #DED7C7;   /* strokes / dividers on bone            */

  /* ---------- NEUTRAL TEXT (warm gray ramp) ---------- */
  --warm-100: #E8EAE6;
  --warm-300: #A8B0AB;
  --warm-400: #8A938D;
  --warm-500: #6B756F;
  --warm-600: #525B55;
  --warm-700: #3A423D;

  /* ---------- FUNCTIONAL ---------- */
  --emerald-500: #1FA877;   /* positive · gains · money-in         */
  --emerald-400: #3FC793;
  --emerald-tint: rgba(31,168,119,0.12);
  --clay-500:    #E0573D;   /* negative · errors · money-out       */
  --clay-400:    #F26F54;
  --clay-tint:   rgba(224,87,61,0.12);
  --sky-500:     #4FA0B8;   /* info · neutral system state         */
  --sky-tint:    rgba(79,160,184,0.12);

  /* ---------- SEMANTIC : DARK THEME (default for app + hero) ---------- */
  --bg:          var(--ink-900);
  --surface:     var(--ink-800);
  --surface-2:   var(--ink-700);
  --surface-hi:  var(--ink-600);
  --border:      rgba(244,241,233,0.10);
  --border-strong: rgba(244,241,233,0.18);
  --text:        var(--bone-100);
  --text-muted:  var(--warm-300);
  --text-faint:  var(--warm-500);
  --accent:      var(--gold-500);
  --accent-hover:var(--gold-400);
  --on-accent:   var(--ink-900);
  --positive:    var(--emerald-400);
  --negative:    var(--clay-400);
  --info:        var(--sky-500);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);  /* @kind other */ /* 44 → 76 hero */
  --h1:       clamp(2.25rem, 1.5rem + 2.8vw, 3.25rem);  /* @kind other */ /* 36 → 52 */
  --h2:       clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);   /* @kind other */ /* 28 → 40 */
  --h3:       1.5rem;     /* 24 */
  --h4:       1.25rem;    /* 20 */
  --body-lg:  1.125rem;   /* 18 */
  --body:     1rem;       /* 16 */
  --small:    0.875rem;   /* 14 */
  --xsmall:   0.75rem;    /* 12 */
  --eyebrow:  0.75rem;    /* 12 — mono, uppercase, tracked */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- ELEVATION (soft, warm-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(14,20,17,0.16);
  --shadow-md: 0 8px 24px -8px rgba(14,20,17,0.30);
  --shadow-lg: 0 24px 60px -16px rgba(14,20,17,0.45);
  --glow-gold: 0 0 0 1px rgba(242,169,60,0.30), 0 12px 40px -8px rgba(242,169,60,0.35);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 240ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
}

/* Light theme: apply .theme-bone to a container (landing light sections, cards) */
.theme-bone {
  --bg:          var(--bone-100);
  --surface:     var(--bone-50);
  --surface-2:   #ffffff;
  --surface-hi:  var(--bone-200);
  --border:      var(--bone-300);
  --border-strong: #CFC6B2;
  --text:        var(--ink-900);
  --text-muted:  var(--warm-600);
  --text-faint:  var(--warm-400);
  --accent:      var(--gold-600);
  --accent-hover:var(--gold-500);
  --on-accent:   var(--ink-900);
  --positive:    var(--emerald-500);
  --negative:    var(--clay-500);
}

/* ============================================================================
   SEMANTIC TYPE — apply directly or copy into component styles
   ============================================================================ */
.lince-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--display); line-height: 0.98; letter-spacing: -0.025em;
  text-wrap: balance;
}
.lince-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--h1); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.lince-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--h2); line-height: 1.08; letter-spacing: -0.018em; text-wrap: balance; }
.lince-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--h3); line-height: 1.18; letter-spacing: -0.012em; }
.lince-h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--h4); line-height: 1.3; letter-spacing: -0.006em; }
.lince-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-lg); line-height: 1.6; }
.lince-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--body); line-height: 1.6; }
.lince-small   { font-family: var(--font-sans); font-weight: 500; font-size: var(--small); line-height: 1.5; }
.lince-eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--eyebrow);
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 1;
}
/* Financial figures: tabular, tight, display face */
.lince-figure {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.lince-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }