/* =========================================================
   Flowlzy · Design Tokens
   v2.0 · 2026-04-17
   "Controlled Flow of Revenue" — Structure · Movement · Clarity
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand Colors ----------
     Navy = Structure (brain)
     Blue = Movement (flow)
     White = Clarity (interface)
  */
  --navy:        #0A2540;   /* Primary · Deep Navy */
  --blue:        #2F6FED;   /* Secondary · Clean Blue */
  --white:       #FFFFFF;   /* Base */

  /* Navy scale (derived for surfaces, borders, text) */
  --navy-900:    #0A2540;
  --navy-800:    #122E4D;
  --navy-700:    #1B3A5E;
  --navy-600:    #2A4A70;
  --navy-500:    #3E5C82;
  --navy-400:    #647A99;
  --navy-300:    #94A4BA;
  --navy-200:    #BFC9D6;
  --navy-100:    #E1E6EE;
  --navy-50:     #F2F4F8;
  --navy-25:     #F8FAFC;

  /* Blue scale */
  --blue-900:    #0F2E73;
  --blue-700:    #1E50C2;
  --blue-600:    #2F6FED;   /* primary blue */
  --blue-500:    #5A8DF1;
  --blue-300:    #A5BFF8;
  --blue-100:    #DEE8FD;
  --blue-50:     #EEF3FE;

  /* Semantic — restrained, system-status only.
     Brand explicitly avoids hype / neon — keep these muted. */
  --success:     #1F8A5A;
  --success-bg:  #E6F3EC;
  --warning:     #B7791F;
  --warning-bg:  #FBF1DA;
  --danger:      #C53030;
  --danger-bg:   #FBE7E7;
  --info:        var(--blue-600);
  --info-bg:     var(--blue-50);

  /* ---------- Foreground / Background semantic ---------- */
  --bg:          var(--white);
  --bg-alt:      var(--navy-25);     /* page section alt */
  --bg-sunken:   var(--navy-50);     /* inset / fields */
  --bg-inverse:  var(--navy-900);    /* dark surfaces */

  --surface:     var(--white);
  --surface-2:   var(--navy-25);
  --surface-3:   var(--navy-50);

  --fg:          var(--navy-900);    /* primary text */
  --fg-2:        var(--navy-700);    /* secondary text */
  --fg-3:        var(--navy-500);    /* tertiary / metadata */
  --fg-4:        var(--navy-400);    /* disabled / placeholder */
  --fg-on-dark:  var(--white);
  --fg-on-blue:  var(--white);

  --border:      var(--navy-100);
  --border-strong: var(--navy-200);
  --border-focus:  var(--blue-600);

  /* ---------- Type ---------- */
  --font-sans:   "Darker Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — web scale per brand guide */
  --fs-display:  56px;      /* hero numbers / display */
  --fs-h1:       48px;      /* headlines top */
  --fs-h2:       36px;
  --fs-h3:       28px;
  --fs-h4:       22px;      /* subhead */
  --fs-h5:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;      /* body */
  --fs-caption:  14px;
  --fs-micro:    12px;      /* labels, eyebrow */

  /* Weights (Darker Grotesque) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line-heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.4;
  --lh-relaxed:  1.55;

  /* Tracking — tight, operational */
  --tr-display: -0.02em;
  --tr-head:    -0.015em;
  --tr-body:    -0.005em;
  --tr-eyebrow:  0.08em;

  /* ---------- Spacing (4pt baseline) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii — straight edges = control, soft corners = flow ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---------- Elevation — flat & operational; no luxury shadows ---------- */
  --shadow-xs: 0 1px 0 rgba(10, 37, 64, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 1px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.10), 0 2px 6px rgba(10, 37, 64, 0.05);
  --shadow-focus: 0 0 0 3px rgba(47, 111, 237, 0.25);

  /* ---------- Motion — controlled, never bouncy ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
}

/* =========================================================
   Base + Semantic element styles
   ========================================================= */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tr-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-head);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
}

p  { margin: 0; }
.p-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.p    { font-size: var(--fs-body);    line-height: var(--lh-relaxed); color: var(--fg-2); }
.cap  { font-size: var(--fs-caption); line-height: var(--lh-normal);  color: var(--fg-3); }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--blue-600);
}

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-2);
}

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--blue-700); }

::selection { background: var(--blue-100); color: var(--navy-900); }