/* FLOWNIQ — Colors & Type
   Single source of truth for the brand's visual primitives.
   Sampled from the brand mark + intro deck (Oct 2025). */

/* Brand font: Poppins (provided as TTF in fonts/). Inter + JetBrains Mono still loaded
   from Google Fonts as the body/mono pairings. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('assets/fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('assets/fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('assets/fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url('assets/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; src: url('assets/fonts/Poppins-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; src: url('assets/fonts/Poppins-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ─────────────────────────────────────────────────────
     COLOR — primary
     The mark is a deep, slightly cool indigo-navy. We
     anchor the system on it and step lighter for
     surfaces and tints, darker for copy.
     ───────────────────────────────────────────────────── */
  --flq-navy-900: #1a1c3d;   /* darkest — headlines on light */
  --flq-navy-800: #232646;   /* sidebars, primary buttons hover */
  --flq-navy-700: #2a2d52;   /* BRAND PRIMARY — logo color */
  --flq-navy-600: #3a3e6e;
  --flq-navy-500: #5b5fa0;
  --flq-navy-400: #8c8fc4;
  --flq-navy-300: #b8badd;
  --flq-navy-200: #d8d9ec;
  --flq-navy-100: #ececf6;
  --flq-navy-050: #f6f6fb;   /* page tints, hover bg */

  /* COLOR — accent
     A friendly cyan-teal pulled from the "flow" feeling
     of the mark. Used for active states, links, focus
     rings. Use sparingly — navy carries the brand. */
  --flq-cyan-700: #1e6e8c;
  --flq-cyan-600: #2a8fb0;
  --flq-cyan-500: #3fb0ce;   /* ACCENT */
  --flq-cyan-400: #6cc5db;
  --flq-cyan-300: #a3dceb;
  --flq-cyan-100: #e3f4f9;

  /* COLOR — neutrals (warm-cool gray, slightly indigo-tinted) */
  --flq-ink-900: #0e1024;
  --flq-ink-800: #1c1f3a;
  --flq-ink-700: #353855;
  --flq-ink-600: #555879;
  --flq-ink-500: #797c9a;
  --flq-ink-400: #a4a7be;
  --flq-ink-300: #c9cbd9;
  --flq-ink-200: #e2e3ec;
  --flq-ink-100: #f1f2f6;
  --flq-ink-050: #f8f9fb;
  --flq-white:   #ffffff;

  /* COLOR — semantic */
  --flq-success-600: #2f9e6a;
  --flq-success-500: #3eb87f;
  --flq-success-100: #e6f7ee;
  --flq-warning-600: #c98a14;
  --flq-warning-500: #e8a02a;
  --flq-warning-100: #fbf2dd;
  --flq-danger-600:  #c14545;
  --flq-danger-500:  #db5a5a;
  --flq-danger-100:  #faeaea;
  --flq-info-600:    #2a6fb0;
  --flq-info-500:    #3f88ce;
  --flq-info-100:    #e6f0fa;

  /* SEMANTIC TOKENS — light surface */
  --bg-page:        var(--flq-ink-050);
  --bg-surface:     var(--flq-white);
  --bg-surface-2:   var(--flq-ink-100);
  --bg-tint:        var(--flq-navy-050);
  --bg-inverse:     var(--flq-navy-700);

  --fg-1:           var(--flq-navy-900);   /* primary text */
  --fg-2:           var(--flq-ink-700);    /* secondary */
  --fg-3:           var(--flq-ink-500);    /* tertiary / meta */
  --fg-4:           var(--flq-ink-400);    /* placeholder / disabled */
  --fg-on-brand:    var(--flq-white);
  --fg-link:        var(--flq-navy-700);
  --fg-link-hover:  var(--flq-cyan-600);

  --border-1:       var(--flq-ink-200);    /* default hairline */
  --border-2:       var(--flq-ink-300);    /* stronger / focused field */
  --border-strong:  var(--flq-navy-700);

  --brand:          var(--flq-navy-700);
  --brand-hover:    var(--flq-navy-800);
  --brand-pressed:  var(--flq-navy-900);
  --brand-tint:     var(--flq-navy-050);

  --accent:         var(--flq-cyan-500);
  --accent-hover:   var(--flq-cyan-600);
  --accent-tint:    var(--flq-cyan-100);

  --focus-ring:     0 0 0 3px rgba(63, 176, 206, 0.35);

  /* ─────────────────────────────────────────────────────
     TYPE
     Display + UI: Poppins (the brand's actual font, supplied
     as TTF in fonts/). Geometric humanist sans, broad weight
     range. Body fallback: Inter. Mono: JetBrains Mono.
     ───────────────────────────────────────────────────── */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* TYPE SCALE — major-third-ish, slightly compressed for enterprise UI */
  --fs-display: 56px;  --lh-display: 1.2;  --tr-display: -0.025em;
  --fs-h1:      40px;  --lh-h1:      1.28;  --tr-h1:      -0.02em;
  --fs-h2:      30px;  --lh-h2:      1.34;  --tr-h2:      -0.015em;
  --fs-h3:      22px;  --lh-h3:      1.28;  --tr-h3:      -0.01em;
  --fs-h4:      18px;  --lh-h4:      1.35;
  --fs-body-lg: 17px;  --lh-body-lg: 1.55;
  --fs-body:    15px;  --lh-body:    1.55;
  --fs-body-sm: 13px;  --lh-body-sm: 1.5;
  --fs-caption: 12px;  --lh-caption: 1.45;
  --fs-overline:11px;  --lh-overline:1.3;   --tr-overline: 0.08em;
  --fs-mono:    13px;  --lh-mono:    1.55;

  /* SPACING — 4px base */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;

  /* RADII */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;     /* default cards, inputs */
  --r-lg: 14px;     /* prominent cards, modals */
  --r-xl: 20px;     /* hero panels */
  --r-pill: 999px;

  /* SHADOWS — subtle, layered, slightly cool */
  --sh-1: 0 1px 2px rgba(26, 28, 61, 0.06), 0 1px 1px rgba(26, 28, 61, 0.04);
  --sh-2: 0 2px 6px rgba(26, 28, 61, 0.06), 0 1px 2px rgba(26, 28, 61, 0.05);
  --sh-3: 0 8px 20px rgba(26, 28, 61, 0.08), 0 2px 6px rgba(26, 28, 61, 0.05);
  --sh-4: 0 18px 40px rgba(26, 28, 61, 0.12), 0 4px 10px rgba(26, 28, 61, 0.06);
  --sh-inset: inset 0 0 0 1px var(--border-1);

  /* MOTION */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ─────────────────────────────────────────────────────
   SEMANTIC ELEMENT DEFAULTS
   Apply these by adding the .flq class to a root element,
   or import the css and use the helper classes.
   ───────────────────────────────────────────────────── */
.flq, .flq * { box-sizing: border-box; }

.flq {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.flq h1, .flq .h1, .flq h2, .flq .h2, .flq h3, .flq .h3, .flq h4, .flq .h4,
.flq .display {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.flq .display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: var(--fw-extra); }
.flq h1, .flq .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: var(--fw-bold); }
.flq h2, .flq .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--fw-bold); }
.flq h3, .flq .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-semi); }
.flq h4, .flq .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semi); }

.flq p, .flq .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; text-wrap: pretty; }
.flq .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.flq .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.flq .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.flq .overline {
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--fg-3);
}
.flq code, .flq .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

.flq a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.flq a:hover { color: var(--fg-link-hover); }

/* Utilities */
.flq .stack > * + * { margin-top: var(--sp-3); }
.flq .row { display: flex; gap: var(--sp-3); align-items: center; }
.flq .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}