/* ============================================================
   FluteLoans — design tokens + self-hosted webfonts

   Source of truth: the Claude Design handoff bundle
   (project/_ds/fluteloans-design-system-*/tokens/*.css).

   This file deliberately contains ONLY @font-face declarations and
   custom properties. Component look-and-feel is configured through
   Salient Theme Options and WPBakery Design Options, not here.
   The only consumers of these variables are Salient's dynamic CSS
   and the two custom elements in inc/elements/.
   ============================================================ */

/* ---- Webfonts (self-hosted; nothing loads from a third-party CDN) ---- */

/* Satoshi — UI/body. Static instances from Fontshare. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Sora — display/headings. Variable font, one file covers 100–800. */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/Sora-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — numerics (rates, payments). Variable, 100–800. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Brand tokens ---- */
:root {
  /* Violet ramp — the brand spine */
  --fl-violet-50:  #F6F2FF;
  --fl-violet-100: #EDE6FE;
  --fl-violet-200: #D5C4FD;
  --fl-violet-300: #B896FB;
  --fl-violet-400: #9B62FA;
  --fl-violet-500: #7C3AED;
  --fl-violet-600: #6D28D9;
  --fl-violet-700: #5A1DB8;
  --fl-violet-800: #45148F;
  --fl-violet-900: #2D0780;
  --fl-violet-950: #1B0740;

  /* Plum ramp — text and neutral surfaces (never a true gray) */
  --fl-plum-950: #140F1F;
  --fl-plum-900: #1A1523;
  --fl-plum-800: #2A2338;
  --fl-plum-700: #3E3556;
  --fl-plum-600: #574C73;
  --fl-plum-500: #726791;
  --fl-plum-400: #948BAD;
  --fl-plum-300: #B7B0C9;
  --fl-plum-200: #D8D3E4;
  --fl-plum-100: #ECE9F3;
  --fl-plum-50:  #F7F5FB;

  /* Accents */
  --fl-apricot-500: #FF9E7A;
  --fl-green-100:   #DCF6E8;
  --fl-green-500:   #16A75C;
  --fl-green-700:   #0E7C42;

  /* Semantic aliases */
  --fl-brand:        var(--fl-violet-500);
  --fl-brand-strong: var(--fl-violet-600);
  --fl-brand-soft:   var(--fl-violet-100);
  --fl-brand-tint:   var(--fl-violet-50);

  --fl-text-strong: var(--fl-plum-900);
  --fl-text-body:   var(--fl-plum-700);
  --fl-text-muted:  var(--fl-plum-500);
  --fl-text-subtle: var(--fl-plum-400);
  --fl-text-brand:  var(--fl-violet-600);
  --fl-text-on-brand-dim: rgba(255, 255, 255, 0.72);

  --fl-surface-page:   var(--fl-plum-50);
  --fl-surface-card:   #FFFFFF;
  --fl-surface-brand:  var(--fl-violet-900);
  --fl-surface-invert: var(--fl-plum-950);

  --fl-border-hairline: var(--fl-plum-100);
  --fl-border-subtle:   var(--fl-plum-200);
  --fl-border-default:  var(--fl-plum-300);

  --fl-success:      var(--fl-green-500);
  --fl-success-soft: var(--fl-green-100);

  /* Gradients */
  --fl-grad-brand: linear-gradient(102deg, #2D0780 0%, #6D28D9 46%, #9B56FE 100%);
  --fl-grad-aurora:
    radial-gradient(60% 80% at 15% 10%, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0) 60%),
    radial-gradient(50% 70% at 90% 20%, rgba(255, 158, 122, 0.16) 0%, rgba(255, 158, 122, 0) 55%),
    radial-gradient(70% 90% at 70% 100%, rgba(155, 98, 250, 0.18) 0%, rgba(155, 98, 250, 0) 60%);

  /* Typography */
  --fl-font-display: 'Sora', 'Satoshi', system-ui, sans-serif;
  --fl-font-sans:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fl-ls-caps: 0.14em;

  /* Radii */
  --fl-radius-sm:   10px;
  --fl-radius-md:   14px;  /* inputs */
  --fl-radius-lg:   20px;  /* cards */
  --fl-radius-xl:   28px;
  --fl-radius-2xl:  40px;  /* hero surfaces */
  --fl-radius-pill: 999px;

  /* Shadows — violet-tinted, never neutral */
  --fl-shadow-sm:    0 2px 8px rgba(45, 7, 128, 0.07);
  --fl-shadow-md:    0 8px 24px rgba(45, 7, 128, 0.10);
  --fl-shadow-lg:    0 18px 44px rgba(45, 7, 128, 0.14);
  --fl-shadow-xl:    0 32px 72px rgba(27, 7, 64, 0.20);
  --fl-shadow-brand: 0 14px 30px rgba(124, 58, 237, 0.34);

  /* Motion */
  --fl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}