/* ==========================================================================
   FAMIVEST DESIGN SYSTEM — Tokens & Typography
   --------------------------------------------------------------------------
   Self-hosted fonts + design tokens + typographic utilities.
   Adapted from Famivest-Design-System-handoff.zip / project/colors_and_type.css.
   ALL external CDN references removed (CSP: font-src 'self', style-src 'self').
   ========================================================================== */

/* -------- FONTS (self-hosted, latin + latin-ext only) -------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-normal-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-normal-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-normal-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-normal-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-normal-latin.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-normal-latin.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-normal-latin.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-normal-latin.woff2') format('woff2');
  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;
}

/* -------- DESIGN TOKENS -------- */

:root {
  /* Forest — primary brand */
  --fv-forest-50:  #f0f6ef;
  --fv-forest-100: #dceadb;
  --fv-forest-200: #b8d3b3;
  --fv-forest-300: #8eb486;
  --fv-forest-400: #5f8f5a;
  --fv-forest-500: #447240;
  --fv-forest-600: #355a31;
  --fv-forest-700: #2a4827;
  --fv-forest-800: #1f3a1d;
  --fv-forest-900: #142614;

  /* Night */
  --fv-night-50:  #f1f5f9;
  --fv-night-100: #dbe4ec;
  --fv-night-200: #b6c8d6;
  --fv-night-300: #8ba6bb;
  --fv-night-400: #5c7f98;
  --fv-night-500: #3a5f7c;
  --fv-night-600: #27475f;
  --fv-night-700: #1b3449;
  --fv-night-800: #0f2233;
  --fv-night-900: #081624;

  /* Sky */
  --fv-sky-100: #e1efff;
  --fv-sky-300: #8ec0ea;
  --fv-sky-500: #3d87c2;
  --fv-sky-700: #205a89;

  /* Honey */
  --fv-honey-100: #fbefd5;
  --fv-honey-300: #edc782;
  --fv-honey-500: #d99a3b;
  --fv-honey-700: #9b6820;

  /* Clay */
  --fv-clay-100: #f1e7df;
  --fv-clay-500: #a67559;
  --fv-clay-700: #6f4a34;

  /* Neutrals */
  --fv-paper:      #faf8f3;
  --fv-paper-alt:  #f4f1e9;
  --fv-stone-50:   #f7f6f2;
  --fv-stone-100:  #edeae1;
  --fv-stone-200:  #dcd8cc;
  --fv-stone-300:  #beb8a7;
  --fv-stone-400:  #8f8a7a;
  --fv-stone-500:  #635f52;
  --fv-stone-600:  #45423a;
  --fv-stone-700:  #2e2c26;
  --fv-stone-800:  #1c1b17;
  --fv-stone-900:  #111110;

  --fv-ink:        #0f2223;
  --fv-ink-soft:   #2d3d3f;

  /* Semantic — foreground */
  --fv-fg-1:       var(--fv-ink);
  --fv-fg-2:       #3c4f52;
  --fv-fg-3:       #67757a;
  --fv-fg-4:       #9aa3a3;
  --fv-fg-on-dark: #f3efe5;
  --fv-fg-on-brand:#ffffff;

  /* Semantic — background */
  --fv-bg-1:       var(--fv-paper);
  --fv-bg-2:       #ffffff;
  --fv-bg-3:       var(--fv-stone-50);
  --fv-bg-4:       var(--fv-stone-100);
  --fv-bg-dark:    var(--fv-night-800);
  --fv-bg-darker:  var(--fv-night-900);

  /* Border */
  --fv-border-1:   #e6e2d7;
  --fv-border-2:   #d4cfc1;
  --fv-border-3:   #b9b2a0;
  --fv-border-focus: var(--fv-forest-500);

  /* Brand shortcuts */
  --fv-primary:        var(--fv-forest-700);
  --fv-primary-hover:  var(--fv-forest-800);
  --fv-primary-soft:   var(--fv-forest-50);
  --fv-accent:         var(--fv-honey-500);
  --fv-link:           var(--fv-sky-700);

  /* States */
  --fv-success:      #2f7d4f;
  --fv-success-soft: #e5f1e9;
  --fv-warning:      #b9792b;
  --fv-warning-soft: #fbefd5;
  --fv-danger:       #a8392e;
  --fv-danger-soft:  #f5e1de;
  --fv-info:         var(--fv-sky-700);
  --fv-info-soft:    var(--fv-sky-100);

  /* Domain accents (7 modules) */
  --fv-dom-patrimoine: var(--fv-forest-700);
  --fv-dom-bank:       var(--fv-sky-700);
  --fv-dom-real:       var(--fv-clay-700);
  --fv-dom-forest:     #2f6b3a;
  --fv-dom-fiscal:     var(--fv-honey-700);
  --fv-dom-legal:      var(--fv-night-700);
  --fv-dom-ai:         #5b4aa8;

  /* Radii */
  --fv-r-xs: 4px;
  --fv-r-sm: 6px;
  --fv-r-md: 10px;
  --fv-r-lg: 14px;
  --fv-r-xl: 20px;
  --fv-r-pill: 999px;

  /* Shadows — cool dark-green biased */
  --fv-shadow-xs: 0 1px 0 rgba(15, 34, 35, 0.04);
  --fv-shadow-sm: 0 1px 2px rgba(15, 34, 35, 0.06), 0 1px 1px rgba(15, 34, 35, 0.04);
  --fv-shadow-md: 0 4px 12px -4px rgba(15, 34, 35, 0.10), 0 2px 4px -2px rgba(15, 34, 35, 0.06);
  --fv-shadow-lg: 0 14px 32px -10px rgba(15, 34, 35, 0.14), 0 4px 8px -4px rgba(15, 34, 35, 0.06);
  --fv-shadow-xl: 0 30px 60px -20px rgba(15, 34, 35, 0.22);
  --fv-shadow-inset-hair: inset 0 0 0 1px rgba(15, 34, 35, 0.06);
  --fv-ring-focus: 0 0 0 3px rgba(68, 114, 64, 0.22);

  /* Spacing — 4-px base */
  --fv-s-1:  4px;
  --fv-s-2:  8px;
  --fv-s-3:  12px;
  --fv-s-4:  16px;
  --fv-s-5:  20px;
  --fv-s-6:  24px;
  --fv-s-8:  32px;
  --fv-s-10: 40px;
  --fv-s-12: 48px;
  --fv-s-16: 64px;
  --fv-s-20: 80px;

  /* Motion */
  --fv-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --fv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fv-dur-fast: 140ms;
  --fv-dur-base: 220ms;
  --fv-dur-slow: 420ms;

  /* Typography — families */
  --fv-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fv-font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --fv-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fv-font-num:   'Inter', sans-serif;

  /* Typography — scale */
  --fv-fs-12: 12px;
  --fv-fs-13: 13px;
  --fv-fs-14: 14px;
  --fv-fs-15: 15px;
  --fv-fs-16: 16px;
  --fv-fs-18: 18px;
  --fv-fs-20: 20px;
  --fv-fs-24: 24px;
  --fv-fs-28: 28px;
  --fv-fs-32: 32px;
  --fv-fs-40: 40px;
  --fv-fs-48: 48px;
  --fv-fs-64: 64px;

  --fv-lh-tight: 1.15;
  --fv-lh-snug:  1.35;
  --fv-lh-base:  1.55;
  --fv-lh-loose: 1.7;

  --fv-tr-tight: -0.02em;
  --fv-tr-base:   0;
  --fv-tr-caps:  0.12em;
}

/* -------- TYPOGRAPHY CLASSES -------- */

.fv-display {
  font-family: var(--fv-font-serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fv-fg-1);
}
.fv-display em {
  font-style: italic;
  color: var(--fv-forest-700);
}

.fv-h1 {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-32);
  line-height: var(--fv-lh-tight);
  letter-spacing: var(--fv-tr-tight);
  font-weight: 700;
  color: var(--fv-fg-1);
}
.fv-h2 {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-24);
  line-height: var(--fv-lh-snug);
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fv-fg-1);
}
.fv-h3 {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-20);
  line-height: var(--fv-lh-snug);
  font-weight: 600;
  color: var(--fv-fg-1);
}
.fv-h4 {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-16);
  line-height: var(--fv-lh-snug);
  font-weight: 600;
  color: var(--fv-fg-1);
}

.fv-body-lg {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-18);
  line-height: var(--fv-lh-base);
  color: var(--fv-fg-2);
}
.fv-body {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-15);
  line-height: var(--fv-lh-base);
  color: var(--fv-fg-2);
}
.fv-body-sm {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-13);
  line-height: var(--fv-lh-base);
  color: var(--fv-fg-3);
}

.fv-caption {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-12);
  line-height: var(--fv-lh-snug);
  color: var(--fv-fg-3);
}

.fv-eyebrow {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-12);
  text-transform: uppercase;
  letter-spacing: var(--fv-tr-caps);
  font-weight: 600;
  color: var(--fv-fg-3);
}

.fv-label {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-13);
  font-weight: 500;
  line-height: 1.35;
  color: var(--fv-fg-1);
}

.fv-num {
  font-family: var(--fv-font-num);
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'ss01' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.005em;
}

.fv-mono {
  font-family: var(--fv-font-mono);
  font-size: var(--fv-fs-13);
}

.fv-root {
  font-family: var(--fv-font-sans);
  font-size: var(--fv-fs-15);
  line-height: var(--fv-lh-base);
  color: var(--fv-fg-1);
  background: var(--fv-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.fv-link {
  color: var(--fv-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--fv-link) 40%, transparent);
  transition:
    color var(--fv-dur-fast) var(--fv-ease),
    border-color var(--fv-dur-fast) var(--fv-ease);
}
.fv-link:hover {
  color: var(--fv-night-800);
  border-bottom-color: var(--fv-night-800);
}

/* -------- TONE ATTRIBUTES (CSP-safe replacement for inline styles) --------
   Usage in HTML:
     <span class="fv-kpi-ic" data-fv-tone="forest"><i class="icon-trending-up"></i></span>
   Replaces the bundle's inline style={{background:..., color:...}} approach.
   ----------------------------------------------------------------------- */

[data-fv-tone="forest"] { background: var(--fv-forest-50);  color: var(--fv-forest-700); }
[data-fv-tone="sky"]    { background: var(--fv-sky-100);    color: var(--fv-sky-700);    }
[data-fv-tone="honey"]  { background: var(--fv-honey-100);  color: var(--fv-honey-700);  }
[data-fv-tone="clay"]   { background: var(--fv-clay-100);   color: var(--fv-clay-700);   }
[data-fv-tone="night"]  { background: var(--fv-night-100);  color: var(--fv-night-700);  }
[data-fv-tone="ai"]     { background: #ebe7f6;              color: var(--fv-dom-ai);     }
[data-fv-tone="stone"]  { background: var(--fv-stone-100);  color: var(--fv-stone-700);  }