/* ============================================================
   LiveFlow Design System — Colors & Type
   Source of truth for all tokens. Import into any HTML/JSX.
   ============================================================ */

/* -------------------------------
   FONTS
   - Suisse Intl (Book 400 + Regular 500) — product UI kit, body/sans.
   - Suisse Intl Mono (Regular) — eyebrows, footnotes, tabular numerics.
   - Suisse Screen (Thin→Bold + Monitor) — in-app / dashboards / large metrics.
   - Ivy Presto Display — display serif, served via Adobe Typekit.
   ------------------------------- */

/* Ivy Presto Display — Adobe Typekit */
@import url("https://use.typekit.net/kfu7frn.css");

/* ===== Suisse Intl (sans) ===== */
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Book.woff2") format("woff2");
  font-weight: 400; /* Book */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Regular.woff2") format("woff2");
  font-weight: 500; /* Regular — heavier than Book */
  font-style: normal;
  font-display: swap;
}

/* ===== Suisse Intl Mono ===== */
@font-face {
  font-family: "Suisse Intl Mono";
  src: url("./fonts/SuisseIntlMono-Regular.woff2") format("woff2"),
       url("./fonts/SuisseIntlMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Suisse Screen (full family) ===== */
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-Thin.otf") format("opentype"),url("./fonts/SuisseScreen-Thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-ThinItalic.otf") format("opentype"),url("./fonts/SuisseScreen-ThinItalic.ttf") format("truetype");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-Light.otf") format("opentype"),url("./fonts/SuisseScreen-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-LightItalic.otf") format("opentype"),url("./fonts/SuisseScreen-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-Regular.otf") format("opentype"),url("./fonts/SuisseScreen-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-RegularItalic.otf") format("opentype"),url("./fonts/SuisseScreen-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-Medium.otf") format("opentype"),url("./fonts/SuisseScreen-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-MediumItalic.otf") format("opentype"),url("./fonts/SuisseScreen-MediumItalic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-SemiBold.otf") format("opentype"),url("./fonts/SuisseScreen-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-SemiBoldItalic.otf") format("opentype"),url("./fonts/SuisseScreen-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-Bold.otf") format("opentype"),url("./fonts/SuisseScreen-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen";src:url("./fonts/SuisseScreen-BoldItalic.otf") format("opentype"),url("./fonts/SuisseScreen-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}

/* Suisse Screen Monitor — separate family for tabular/mono-like numbers */
@font-face{font-family:"Suisse Screen Monitor";src:url("./fonts/SuisseScreen-Monitor.otf") format("opentype"),url("./fonts/SuisseScreen-Monitor.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Screen Monitor";src:url("./fonts/SuisseScreen-MonitorItalic.otf") format("opentype"),url("./fonts/SuisseScreen-MonitorItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}




:root {
  /* =====================================================
     CORE BLUE — product palette
     ===================================================== */
  --lf-light-blue:   #E9F3FF;
  --lf-medium-blue:  #5D98F8;
  --lf-dark-blue:    #0C1163;
  --lf-cold-black:   #000B1D;

  /* =====================================================
     SECONDARY — attention & narrative
     ===================================================== */
  --lf-amber-bronze: #E8871E;
  --lf-honey-bronze: #EDB458;
  --lf-light-bronze: #FFF2DD;
  --lf-forest-green: #104733;
  --lf-mint-green:   #DEEFE5;
  --lf-maroon:       #470123;
  --lf-coral:        #FDE5E3;

  /* =====================================================
     TERTIARY — in-product & illustration only
     ===================================================== */
  --lf-cyan:         #CFFAFE;
  --lf-peach:        #FFEDD5;
  --lf-slate-grey:   #F1F5F9;
  --lf-light-lime:   #EDFFC8;
  --lf-light-coral:  #FFE4ED;
  --lf-light-pink:   #FAE8FF;
  --lf-lilac:        #F5F3FF;
  --lf-ocean-teal:   #164E63;
  --lf-blood-orange: #B73609;
  --lf-cool-grey:    #0F172A;
  --lf-lime:         #66AC04;
  --lf-deep-coral:   #B90343;
  --lf-magenta:      #701A75;
  --lf-deep-purple:  #4C1D95;

  /* =====================================================
     SEMANTIC — foreground / background / stroke
     ===================================================== */
  --lf-bg:           #FFFFFF;
  --lf-bg-muted:     #FAFAF7;            /* off-white paper */
  --lf-bg-wash:      var(--lf-light-blue);
  --lf-bg-dark:      var(--lf-cold-black);

  --lf-fg:           var(--lf-cold-black);
  --lf-fg-muted:     rgba(0, 11, 29, 0.62);
  --lf-fg-subtle:    rgba(0, 11, 29, 0.38);
  --lf-fg-inverse:   #FFFFFF;

  --lf-stroke:       rgba(0, 11, 29, 0.12);
  --lf-stroke-strong: rgba(0, 11, 29, 0.22);
  --lf-stroke-dark:  rgba(255, 255, 255, 0.16);

  --lf-accent:       var(--lf-medium-blue);
  --lf-accent-deep:  var(--lf-dark-blue);

  /* =====================================================
     GRADIENTS — every gradient begins at Cold Black
     ===================================================== */
  --lf-grad-blue:    linear-gradient(180deg, #000B1D 0%, #0C1163 100%);
  --lf-grad-medium:  linear-gradient(180deg, #000B1D 0%, #5D98F8 120%);
  --lf-grad-amber:   linear-gradient(180deg, #000B1D 0%, #E8871E 120%);
  --lf-grad-honey:   linear-gradient(180deg, #000B1D 0%, #EDB458 120%);
  --lf-grad-forest:  linear-gradient(180deg, #000B1D 0%, #104733 100%);
  --lf-grad-maroon:  linear-gradient(180deg, #000B1D 0%, #470123 100%);
  --lf-grad-multi:   linear-gradient(180deg,
                       #000B1D 0%,
                       #164E63 32%,
                       #FFF2DD 62%,
                       #DEEFE5 82%,
                       #FDE5E3 100%);

  /* =====================================================
     TYPOGRAPHY — families, weights
     ===================================================== */
  --lf-font-display: "ivypresto-display", "Ivy Presto", "IvyPresto Display",
                     "IvyPresto", "Canela", "Noe Display", Georgia, serif;
  --lf-font-sans:    "Suisse Intl", "Suisse Int'l", "Inter",
                     ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --lf-font-mono:    "Suisse Intl Mono", "Suisse Screen Monitor",
                     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Suisse Screen — screen/dashboard/metric face (full weight range) */
  --lf-font-screen:  "Suisse Screen", "Suisse Intl", "Inter",
                     ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --lf-w-book:    400;
  --lf-w-regular: 500;
  --lf-w-display-light:   300;
  --lf-w-display-regular: 400;

  /* =====================================================
     TYPE ROLES — (role = family + tracking + leading)
     Sizes are per-surface. These are the constants.
     ===================================================== */
  --lf-eyebrow-family: var(--lf-font-mono);
  --lf-eyebrow-track:  0.05em;
  --lf-eyebrow-case:   none;      /* mono is NOT uppercased — natural case */
  --lf-eyebrow-weight: 400;

  --lf-headline-family: var(--lf-font-display);
  --lf-headline-track:  -0.02em;
  --lf-headline-leading: 1.15;
  --lf-headline-weight: 300;    /* Light */
  --lf-headline-alt-weight: 400; /* Regular */

  --lf-subhead-family: var(--lf-font-sans);
  --lf-subhead-track:  -0.03em;
  --lf-subhead-leading: 1.2;
  --lf-subhead-weight: 500;     /* Regular */

  --lf-body-family: var(--lf-font-sans);
  --lf-body-track:  0em;
  --lf-body-leading: 1.45;
  --lf-body-weight: 400;        /* Book */

  --lf-cta-family: var(--lf-font-sans);
  --lf-cta-track:  0em;
  --lf-cta-weight: 400;

  --lf-footnote-family: var(--lf-font-mono);
  --lf-footnote-track:  0.05em;
  --lf-footnote-case:   none;     /* mono is NOT uppercased */

  /* =====================================================
     SCALE — sensible defaults; override per surface
     ===================================================== */
  --lf-size-eyebrow:   12px;
  --lf-size-caption:   13px;
  --lf-size-body-sm:   14px;
  --lf-size-body:      16px;
  --lf-size-body-lg:   18px;
  --lf-size-subhead:   22px;
  --lf-size-h5:        24px;
  --lf-size-h4:        32px;
  --lf-size-h3:        44px;
  --lf-size-h2:        64px;
  --lf-size-h1:        96px;
  --lf-size-display:   144px;

  /* =====================================================
     SPACING, RADII, SHADOWS
     ===================================================== */
  --lf-space-1:  4px;
  --lf-space-2:  8px;
  --lf-space-3:  12px;
  --lf-space-4:  16px;
  --lf-space-5:  24px;
  --lf-space-6:  32px;
  --lf-space-7:  48px;
  --lf-space-8:  64px;
  --lf-space-9:  96px;
  --lf-space-10: 128px;

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

  /* soft, low-contrast — finance requires calm, not drama */
  /* blue-tinted: Dark Blue #0C1163 with a touch of Medium Blue #5D98F8 */
  --lf-shadow-xs: 0 1px 2px rgba(12, 17, 99, 0.08);
  --lf-shadow-sm: 0 1px 2px rgba(12, 17, 99, 0.08), 0 2px 6px rgba(12, 17, 99, 0.06);
  --lf-shadow-md: 0 4px 12px rgba(12, 17, 99, 0.10), 0 2px 4px rgba(12, 17, 99, 0.07);
  --lf-shadow-lg: 0 18px 48px rgba(12, 17, 99, 0.14), 0 6px 14px rgba(12, 17, 99, 0.08);
  --lf-shadow-inset: inset 0 0 0 1px rgba(12, 17, 99, 0.10);

  /* noise texture — pin the brand together. Used as overlay. */
  --lf-noise: url("./assets/noise.svg");

  /* motion */
  --lf-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --lf-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --lf-dur-fast:   140ms;
  --lf-dur-base:   240ms;
  --lf-dur-slow:   420ms;
}

/* ============================================================
   BASE ELEMENTS — opinionated mappings
   ============================================================ */
html, body {
  background: var(--lf-bg);
  color: var(--lf-fg);
  font-family: var(--lf-font-sans);
  font-weight: var(--lf-w-book);
  font-size: var(--lf-size-body);
  line-height: var(--lf-body-leading);
  letter-spacing: var(--lf-body-track);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--lf-font-display);
  font-weight: var(--lf-w-display-light);
  letter-spacing: var(--lf-headline-track);
  line-height: var(--lf-headline-leading);
  color: var(--lf-fg);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--lf-size-h1); }
h2 { font-size: var(--lf-size-h2); }
h3 { font-size: var(--lf-size-h3); }
h4 { font-size: var(--lf-size-h4); font-weight: var(--lf-w-display-regular); }

h5, h6, .lf-subhead {
  font-family: var(--lf-subhead-family);
  font-weight: var(--lf-subhead-weight);
  letter-spacing: var(--lf-subhead-track);
  line-height: var(--lf-subhead-leading);
  margin: 0;
}
h5 { font-size: var(--lf-size-h5); }
h6 { font-size: var(--lf-size-subhead); }

p, .lf-body {
  font-family: var(--lf-body-family);
  font-weight: var(--lf-body-weight);
  letter-spacing: var(--lf-body-track);
  line-height: var(--lf-body-leading);
  margin: 0;
  text-wrap: pretty;
}

.lf-eyebrow {
  font-family: var(--lf-eyebrow-family);
  font-weight: var(--lf-eyebrow-weight);
  letter-spacing: var(--lf-eyebrow-track);
  text-transform: var(--lf-eyebrow-case);
  font-size: var(--lf-size-eyebrow);
  line-height: 1.2;
}

.lf-footnote {
  font-family: var(--lf-footnote-family);
  letter-spacing: var(--lf-footnote-track);
  text-transform: var(--lf-footnote-case);
  font-size: var(--lf-size-caption);
  color: var(--lf-fg-muted);
}

code, pre, .lf-mono {
  font-family: var(--lf-font-mono);
  font-size: 0.92em;
}

/* noise overlay — attach as `.lf-noise::after` layer or inline */
.lf-noise-overlay {
  position: relative;
  isolation: isolate;
}
.lf-noise-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--lf-noise);
  background-size: 160px 160px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}