/* ============================================================
   Flowtely — Brand Design Tokens
   A Chatura AI product · Brand system v1.0
   Drop into any web/app project. Use the CSS custom properties,
   or read the values directly for native / doc / deck builds.
   ============================================================ */

:root {
  /* ---------- Flowtely flow gradient (signature) ---------- */
  --ft-aqua:        #0FC9B0;  /* Flow Aqua  — start node, success-lean accent */
  --ft-blue:        #2E7DFF;  /* Bridge Blue — primary accent, ties to Chatura */
  --ft-violet:      #6E5CFF;  /* Flow Violet — end node, AI/agent accent */
  --ft-gradient:    linear-gradient(110deg, #0FC9B0 0%, #2E7DFF 52%, #6E5CFF 100%);
  --ft-gradient-45: linear-gradient(45deg,  #0FC9B0 0%, #2E7DFF 52%, #6E5CFF 100%);

  /* ---------- Ink & surfaces ---------- */
  --ft-ink:         #0A1628;  /* primary text, dark backgrounds (shared w/ Chatura) */
  --ft-ink-2:       #0E1B30;  /* elevated dark panel */
  --ft-ink-deep:    #060E1A;  /* footer / deepest elevation */
  --ft-mist:        #F7FAFC;  /* soft light panel */
  --ft-white:       #FFFFFF;

  /* ---------- Neutral ramp ---------- */
  --ft-n-50:        #F8FAFC;
  --ft-n-100:       #F1F5F9;
  --ft-n-200:       #E5E7EB;
  --ft-n-300:       #CBD5E1;
  --ft-n-400:       #94A3B8;
  --ft-n-500:       #64748B;  /* muted text / captions */
  --ft-n-700:       #334155;
  --ft-n-800:       #1E293B;
  --ft-n-900:       #0A1628;

  /* ---------- Status ---------- */
  --ft-success:     #10B981;
  --ft-warning:     #F59E0B;
  --ft-danger:      #EF4444;
  --ft-info:        #2E7DFF;

  /* ---------- Semantic roles (light surface) ---------- */
  --ft-fg:          var(--ft-ink);
  --ft-fg-muted:    var(--ft-n-500);
  --ft-fg-accent:   var(--ft-blue);
  --ft-bg:          var(--ft-white);
  --ft-bg-soft:     var(--ft-mist);
  --ft-border:      var(--ft-n-200);
  --ft-link:        var(--ft-blue);

  /* ---------- Semantic roles (dark surface) ---------- */
  --ft-fg-on-dark:        #FFFFFF;
  --ft-fg-on-dark-muted:  #B0BEC5;
  --ft-bg-dark:           var(--ft-ink);
  --ft-border-on-dark:    rgba(255,255,255,0.08);

  /* ---------- Typography ---------- */
  --ft-font-sans: 'Chatura Display','Inter',system-ui,-apple-system,sans-serif;
  --ft-font-mono: 'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;

  --ft-weight-regular:  400;
  --ft-weight-medium:   500;
  --ft-weight-semibold: 600;
  --ft-weight-bold:     700;
  --ft-weight-extra:    800;

  /* Type scale (px) — display down to caption */
  --ft-text-display: 88px;  --ft-tracking-display: -0.035em;
  --ft-text-h1:      64px;  --ft-tracking-h1:      -0.03em;
  --ft-text-h2:      40px;  --ft-tracking-h2:      -0.025em;
  --ft-text-h3:      28px;  --ft-tracking-h3:      -0.02em;
  --ft-text-lead:    24px;
  --ft-text-body:    17px;  --ft-leading-body:     1.6;
  --ft-text-sm:      14px;
  --ft-text-caption: 12px;  --ft-tracking-caption: 0.14em; /* uppercase eyebrow */

  /* ---------- Spacing scale (px) ---------- */
  --ft-space-1: 4px;   --ft-space-2: 8px;   --ft-space-3: 12px;
  --ft-space-4: 16px;  --ft-space-5: 24px;  --ft-space-6: 32px;
  --ft-space-7: 40px;  --ft-space-8: 64px;  --ft-space-9: 80px;
  --ft-space-10: 96px;

  /* ---------- Radius ---------- */
  --ft-radius-sm:  8px;
  --ft-radius-md:  12px;
  --ft-radius-lg:  16px;
  --ft-radius-xl:  26px;   /* app-icon squircle */
  --ft-radius-pill: 9999px;

  /* ---------- Elevation ---------- */
  --ft-shadow-sm: 0 1px 3px rgba(10,22,40,0.08);
  --ft-shadow-md: 0 4px 16px rgba(10,22,40,0.10);
  --ft-shadow-lg: 0 18px 48px rgba(10,22,40,0.18);
  --ft-glow-aqua: 0 0 40px rgba(15,201,176,0.45);

  /* ---------- Icon spec ---------- */
  --ft-icon-stroke: 1.8px;   /* on a 24px grid, round caps + joins */
  --ft-icon-grid:   24px;
}

/* ---------- Parent brand: Chatura AI ---------- */
:root {
  --chatura-navy:   #0A1628;
  --chatura-blue:   #0066FF;   /* electric blue — Chatura's accent */
  --chatura-cyan:   #06B6D4;
  --chatura-gradient: linear-gradient(135deg, #0066FF 0%, #06B6D4 100%);
}

/* ============================================================
   Utility classes (optional convenience)
   ============================================================ */
.ft-gradient-text {
  background: var(--ft-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ft-gradient-bg { background: var(--ft-gradient); }
.ft-eyebrow {
  font-family: var(--ft-font-sans);
  font-size: var(--ft-text-caption);
  font-weight: var(--ft-weight-semibold);
  letter-spacing: var(--ft-tracking-caption);
  text-transform: uppercase;
  color: var(--ft-aqua);
}