/* === tokens/fonts.css === */
/* Flowpark webfonts — Outfit (display/headings) + Inter (body/UI).
   Loaded from Google Fonts CDN. If you need self-hosted binaries,
   drop the .woff2 files in assets/fonts/ and replace these @import/@font-face. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* === tokens/colors.css === */
/* Flowpark Design System — Color
   Light-mode first. White editorial canvas, one confident purple (#5332F3),
   restrained green for positive / live / revenue. No gradients — ever.
   Depth comes from 1px hairlines and surface alternation, not color washes. */

:root {
  /* ---- Purple scale (brand) ---- */
  --purple-50:  #F1EEFE;
  --purple-100: #E4DDFD;
  --purple-200: #C8BAFB;
  --purple-300: #A791F7;
  --purple-400: #8262F5;
  --purple-500: #5332F3;   /* primary — from the flow mark */
  --purple-600: #4522D6;   /* hover (darkens on light) */
  --purple-700: #3819AC;
  --purple-800: #2A1580;
  --purple-900: #1D0F58;

  /* ---- Neutrals ---- */
  --white:      #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-150: #ECECEE;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;
  --ink:         #17171C;   /* near-black — dark bands + primary text anchor */

  /* ---- Warm stone (Cohere-derived alt surface) ---- */
  --stone-50: #F7F5F1;
  --stone-100: #EFEBE3;

  /* ---- Green accent (positive / live / revenue) ---- */
  --green-50:  #E7F8F0;
  --green-100: #C7EED9;
  --green-300: #6DD9A2;
  --green-400: #34C77B;
  --green-500: #12B76A;
  --green-600: #0E9F5B;
  --green-700: #0A7D48;

  /* ---- Status ---- */
  --red-50:   #FDECEC;
  --red-500:  #E5484D;
  --red-600:  #CC3339;
  --amber-50: #FEF6E7;
  --amber-500:#EA9A0F;
  --amber-600:#C97E06;
  --blue-50:  #EAF0FE;
  --blue-500: #2E6BE6;
  --blue-600: #1F55C7;

  /* ================= Semantic aliases ================= */

  /* Surfaces */
  --surface-canvas:  var(--white);
  --surface-subtle:  var(--neutral-50);
  --surface-muted:   var(--neutral-100);
  --surface-stone:   var(--stone-50);
  --surface-card:    var(--white);
  --surface-inverse: var(--ink);

  /* Dark band (used inside light pages — Linear/Cohere style) */
  --surface-dark:        var(--ink);
  --text-on-dark:        #FAFAFA;
  --text-on-dark-muted:  rgba(255,255,255,0.74);
  --text-on-dark-subtle: rgba(255,255,255,0.56);
  --border-on-dark:      rgba(255,255,255,0.12);
  --border-on-dark-strong: rgba(255,255,255,0.20);

  /* Borders (the workhorse) */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus:  var(--purple-500);

  /* Text */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-brand:     var(--purple-600);
  --text-on-brand:  var(--white);

  /* Brand */
  --brand:         var(--purple-500);
  --brand-hover:   var(--purple-600);
  --brand-active:  var(--purple-700);
  --brand-subtle:  var(--purple-50);
  --brand-border:  var(--purple-200);

  /* Accent */
  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-subtle: var(--green-50);
  --accent-text:   var(--green-700);

  /* Semantic status */
  --success:       var(--green-600);
  --success-subtle:var(--green-50);
  --danger:        var(--red-500);
  --danger-subtle: var(--red-50);
  --warning:       var(--amber-600);
  --warning-subtle:var(--amber-50);
  --info:          var(--blue-500);
  --info-subtle:   var(--blue-50);

  /* Link */
  --link:       var(--purple-600);
  --link-hover: var(--purple-700);
}


/* === tokens/typography.css === */
/* ============================================================
   FLOWPARK — TYPOGRAPHY TOKENS
   Outfit = display / headings (bold, tight).
   Inter  = sans / body / UI text (--font-sans).
   JetBrains Mono = data, codes, numeric readouts.
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;   /* body / UI — components consume this */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — Outfit display runs tight */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;
}


/* === tokens/spacing.css === */
/* Flowpark Design System — Spacing, radii, borders, shadows, motion, layout.
   Depth is carried by 1px hairlines + surface alternation, not heavy shadow.
   No glow, no gradients. */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-section: 112px;   /* between marketing sections */

  /* ---- Radii ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  10px;   /* controls: buttons, inputs, selects */
  --radius-lg:  14px;   /* cards */
  --radius-xl:  20px;   /* large media / feature panels */
  --radius-2xl: 28px;   /* oversized CTA panels (rare) */
  --radius-pill: 9999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (soft, low-opacity — light mode) ---- */
  --shadow-xs: 0 1px 2px rgba(14,14,18,0.05);
  --shadow-sm: 0 1px 3px rgba(14,14,18,0.06), 0 1px 2px rgba(14,14,18,0.04);
  --shadow-md: 0 4px 14px rgba(14,14,18,0.08);
  --shadow-lg: 0 14px 36px rgba(14,14,18,0.10);
  --shadow-xl: 0 28px 64px rgba(14,14,18,0.14);
  --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px rgba(83,50,243,0.9);

  /* ---- Motion (fast + snappy, Linear-style) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* subtle overshoot — switches */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---- Opacity ---- */
  --opacity-disabled: 0.5; /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base: 0; /* @kind other */
  --z-dropdown: 1000; /* @kind other */
  --z-sticky: 1100; /* @kind other */
  --z-overlay: 1200; /* @kind other */
  --z-modal: 1300; /* @kind other */
  --z-toast: 1400; /* @kind other */
  --z-tooltip: 1500; /* @kind other */

  /* ---- Icon sizes ---- */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* ---- Breakpoints (for JS / container queries; not usable in @media) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 880px;
  --sidebar-width: 248px;
  --topbar-height: 60px;
  --nav-height: 64px;
}


/* === tokens/base.css === */
/* ============================================================
   FLOWPARK — base resets + element defaults.
   Light-mode first: the document defaults to the light theme.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--text-primary);
}

p { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, pre, kbd { font-family: var(--font-mono); }

::selection { background: var(--brand); color: var(--white); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Numeric / tabular figures helper for dashboards */
.fp-tnum { font-variant-numeric: tabular-nums; }


/* === site nav === */
.fp-menu{position:static}
  .fp-mega{opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 160ms var(--ease-out),transform 200ms var(--ease-out),visibility 200ms}
  header:has(.fp-menu:hover){border-bottom-color:transparent}
  .fp-menu:hover .fp-mega{opacity:1;visibility:visible;transform:translateY(0)}
  .fp-menu:hover .fp-menu-trigger{color:var(--text-primary);background:var(--surface-subtle)}
  .fp-menu:hover .fp-menu-chev{transform:rotate(180deg)}
  .fp-item:hover{background:var(--surface-subtle)}
  .fp-item:hover .fp-item-title{color:var(--text-brand)}
  .fp-plain:hover{color:var(--text-primary)}
  .fp-menu-trigger[data-fp-active="true"]{color:var(--text-primary)}
  .fp-nav-link[data-fp-active="true"]{color:var(--text-primary)}
  .fp-item[data-fp-active="true"]{background:var(--brand-subtle)}
  .fp-item[data-fp-active="true"] .fp-item-title{color:var(--text-brand)}
  .fp-featured:hover{border-color:var(--border-strong)}
  .fp-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-primary);cursor:pointer;padding:0}
  .fp-mobile-drawer{display:none}
  .fp-drawer-link:hover{background:var(--surface-muted)}
  @media (max-width:1040px){
    .fp-desktop-nav{display:none !important}
    .fp-lang-desktop{display:none !important}
    .fp-signin{display:none !important}
    .fp-hamburger{display:inline-flex !important}
    .fp-mobile-drawer.open{display:block !important}
  }

/* === site footer === */
.fp-footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
  .fp-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}
  @media (max-width:820px){
    .fp-footer-grid{grid-template-columns:1fr 1fr;gap:28px 24px}
    .fp-footer-brand{grid-column:1 / -1}
  }
  @media (max-width:480px){
    .fp-footer-grid{grid-template-columns:1fr}
    .fp-footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  }

/* === buttons (Flowpark DS Button, static) === */
.fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:600;line-height:1;letter-spacing:0;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;user-select:none;text-decoration:none;border:1px solid transparent;transition:background var(--dur-fast,120ms) var(--ease-out),transform var(--dur-fast,120ms) var(--ease-out),border-color var(--dur-fast,120ms) var(--ease-out)}
.fp-btn--sm{height:32px;padding:0 22px;font-size:13px;gap:6px}
.fp-btn--md{height:40px;padding:0 26px;font-size:14px}
.fp-btn--lg{height:48px;padding:0 30px;font-size:15px}
.fp-btn--primary{background:var(--brand);color:var(--text-on-brand)}
.fp-btn--primary:hover{background:var(--brand-hover);color:var(--text-on-brand);transform:translateY(-1px)}
.fp-btn--secondary{background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs)}
.fp-btn--secondary:hover{background:var(--surface-muted);border-color:var(--border-strong);color:var(--text-primary);transform:translateY(-1px)}
.fp-nav-sticky{position:sticky;top:0;z-index:1100}