/**
 * Flownex — Brand Tokens
 * Single source of truth for color, typography, spacing, radius, shadow, motion.
 * Import this BEFORE any component or page CSS.
 */

/* ══════════════════════════════════════════════════════════════════════
 * FONT FACES
 * ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════════
 * DESIGN TOKENS — CSS custom properties
 * ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── BRAND ── */
  --fn-brand:        #00D9C4;  /* primary brand teal */
  --fn-brand-hover:  #00BCA9;  /* hover / pressed */
  --fn-brand-dark:   #00A590;  /* gradient end */
  --fn-brand-dim:    rgba(0,217,196,0.12);  /* subtle fills */
  --fn-brand-border: rgba(0,217,196,0.22);  /* subtle borders */
  --fn-brand-glow:   rgba(0,217,196,0.35);  /* focus / glow */

  /* ── ACCENT ── */
  --fn-coral:        #FF6B35;  /* secondary CTA / energy */
  --fn-coral-hover:  #E85A26;
  --fn-purple:       #A78BFA;  /* tertiary */

  /* ── SURFACES (dark, default theme) ── */
  --fn-bg:           #07080D;  /* page background */
  --fn-surface-1:    #0C0E18;  /* card background */
  --fn-surface-2:    #10131F;  /* elevated card */
  --fn-surface-3:    #141826;  /* popover / modal */
  --fn-surface-4:    #1A1F2E;  /* input background */

  /* ── BORDERS ── */
  --fn-border:       #1A1F2E;  /* default divider */
  --fn-border-2:     #22283C;  /* emphasized border */
  --fn-border-3:     #2E3654;  /* focus border */

  /* ── TEXT ── */
  --fn-text:         #EDF0F9;  /* primary text */
  --fn-text-2:       #A8B0C8;  /* secondary text */
  --fn-text-3:       #8892AE;  /* tertiary / muted */
  --fn-text-4:       #454D68;  /* disabled / icon */

  /* ── SEMANTIC ── */
  --fn-success:      #2DD4A0;
  --fn-success-dim:  rgba(45,212,160,0.12);
  --fn-warning:      #FBBF24;
  --fn-warning-dim:  rgba(251,191,36,0.12);
  --fn-error:        #F87171;
  --fn-error-dim:    rgba(248,113,113,0.12);
  --fn-info:         #60A5FA;
  --fn-info-dim:     rgba(96,165,250,0.12);

  /* ── TYPOGRAPHY ── */
  --fn-font-display: 'Space Grotesk', system-ui, sans-serif;
  --fn-font-body:    'DM Sans', system-ui, sans-serif;
  --fn-font-mono:    'DM Mono', ui-monospace, monospace;

  --fn-text-xs:      10px;
  --fn-text-sm:      11px;
  --fn-text-base:    13px;
  --fn-text-md:      15px;
  --fn-text-lg:      18px;
  --fn-text-xl:      24px;
  --fn-text-2xl:     32px;
  --fn-text-3xl:     48px;
  --fn-text-4xl:     64px;
  --fn-text-5xl:     80px;

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

  --fn-leading-tight: 1.2;
  --fn-leading-snug:  1.4;
  --fn-leading-normal:1.5;
  --fn-leading-relaxed:1.7;

  --fn-tracking-tight: -0.02em;
  --fn-tracking-wide:   0.06em;

  /* ── SPACING (4pt scale) ── */
  --fn-space-1:  4px;
  --fn-space-2:  8px;
  --fn-space-3:  12px;
  --fn-space-4:  16px;
  --fn-space-5:  20px;
  --fn-space-6:  24px;
  --fn-space-8:  32px;
  --fn-space-10: 40px;
  --fn-space-12: 48px;
  --fn-space-16: 64px;
  --fn-space-20: 80px;
  --fn-space-24: 96px;

  /* ── RADIUS ── */
  --fn-radius-xs:   4px;
  --fn-radius-sm:   6px;
  --fn-radius-md:   8px;
  --fn-radius-lg:   12px;
  --fn-radius-xl:   16px;
  --fn-radius-2xl:  24px;
  --fn-radius-full: 9999px;

  /* ── SHADOWS ── */
  --fn-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --fn-shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --fn-shadow-lg: 0 12px 32px rgba(0,0,0,0.35);
  --fn-shadow-xl: 0 24px 48px rgba(0,0,0,0.45);
  --fn-shadow-glow: 0 0 24px var(--fn-brand-glow);

  /* ── MOTION ── */
  --fn-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --fn-ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --fn-ease-inout: cubic-bezier(0.76, 0, 0.24, 1);

  --fn-duration-fast:   120ms;
  --fn-duration-base:   200ms;
  --fn-duration-slow:   400ms;
  --fn-duration-slower: 700ms;

  /* ── Z-INDEX ── */
  --fn-z-dropdown:  100;
  --fn-z-sticky:    200;
  --fn-z-overlay:   900;
  --fn-z-modal:     1000;
  --fn-z-toast:     1100;

  /* ── LAYOUT ── */
  --fn-container:   1200px;
  --fn-sidebar-w:   232px;
  --fn-header-h:    56px;
}

/* ══════════════════════════════════════════════════════════════════════
 * LIGHT THEME OVERRIDES
 * Toggle by setting [data-theme="light"] on <html>
 * ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --fn-bg:           #FAFBFD;
  --fn-surface-1:    #FFFFFF;
  --fn-surface-2:    #F5F7FB;
  --fn-surface-3:    #FFFFFF;
  --fn-surface-4:    #F5F7FB;
  --fn-border:       #E5E8EF;
  --fn-border-2:     #D4D9E3;
  --fn-border-3:     #00D9C4;
  --fn-text:         #0A0B10;
  --fn-text-2:       #4A536B;
  --fn-text-3:       #6B7490;
  --fn-text-4:       #A5ACBF;
  --fn-brand-dim:    rgba(0,180,161,0.08);
  --fn-brand-border: rgba(0,180,161,0.3);
  --fn-shadow-sm:    0 1px 2px rgba(16,24,40,0.05);
  --fn-shadow-md:    0 4px 12px rgba(16,24,40,0.08);
  --fn-shadow-lg:    0 12px 32px rgba(16,24,40,0.12);
}

/* ══════════════════════════════════════════════════════════════════════
 * LEGACY ALIASES — keep existing pages working
 * Map old var names to new brand tokens.
 * ══════════════════════════════════════════════════════════════════════ */
:root {
  --brand:        var(--fn-brand);
  --brand-2:      var(--fn-brand-hover);
  --brand-dim:    var(--fn-brand-dim);
  --brand-border: var(--fn-brand-border);
  --coral:        var(--fn-coral);
  --coral-2:      var(--fn-coral-hover);
  --bg:           var(--fn-bg);
  --s1:           var(--fn-surface-1);
  --s2:           var(--fn-surface-2);
  --s3:           var(--fn-surface-3);
  --border:       var(--fn-border);
  --border2:      var(--fn-border-2);
  --text:         var(--fn-text);
  --text2:        var(--fn-text-2);
  --text3:        var(--fn-text-3);
  --green:        var(--fn-success);
  --red:          var(--fn-error);
  --amber:        var(--fn-warning);
  --purple:       var(--fn-purple);
  --blue:         var(--fn-info);
  --mono:         var(--fn-font-mono);
  --display:      var(--fn-font-display);
  --body:         var(--fn-font-body);
  --r:            var(--fn-radius-md);
  --r2:           var(--fn-radius-lg);
  --r3:           var(--fn-radius-xl);
}

/* ══════════════════════════════════════════════════════════════════════
 * BASE RESET + TYPOGRAPHY
 * ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--fn-bg);
  color: var(--fn-text);
  font-family: var(--fn-font-body);
  font-size: var(--fn-text-base);
  line-height: var(--fn-leading-normal);
}

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

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

a {
  color: var(--fn-brand);
  text-decoration: none;
  transition: color var(--fn-duration-fast) var(--fn-ease-out);
}
a:hover { color: var(--fn-brand-hover); }

::selection {
  background: var(--fn-brand-dim);
  color: var(--fn-text);
}

/* ══════════════════════════════════════════════════════════════════════
 * COMPONENT PRIMITIVES (use in new pages)
 * ══════════════════════════════════════════════════════════════════════ */

/* Buttons */
.fn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fn-space-2);
  padding: var(--fn-space-2) var(--fn-space-4);
  border-radius: var(--fn-radius-md);
  font-family: var(--fn-font-body);
  font-size: var(--fn-text-base);
  font-weight: var(--fn-weight-semi);
  line-height: 1;
  cursor: pointer;
  transition: all var(--fn-duration-fast) var(--fn-ease-out);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.fn-btn-primary {
  background: var(--fn-brand);
  color: #07080D;
}
.fn-btn-primary:hover { background: var(--fn-brand-hover); box-shadow: var(--fn-shadow-glow); }
.fn-btn-secondary {
  background: var(--fn-surface-2);
  color: var(--fn-text);
  border-color: var(--fn-border-2);
}
.fn-btn-secondary:hover { border-color: var(--fn-brand); }
.fn-btn-ghost {
  background: transparent;
  color: var(--fn-text-2);
}
.fn-btn-ghost:hover { background: var(--fn-surface-2); color: var(--fn-text); }
.fn-btn-danger {
  background: var(--fn-error);
  color: #07080D;
}
.fn-btn-coral {
  background: var(--fn-coral);
  color: #FFFFFF;
}
.fn-btn-coral:hover { background: var(--fn-coral-hover); }
.fn-btn-sm { padding: 6px 12px; font-size: var(--fn-text-sm); }
.fn-btn-lg { padding: 12px 24px; font-size: var(--fn-text-md); }

/* Inputs */
.fn-input {
  width: 100%;
  padding: var(--fn-space-2) var(--fn-space-3);
  background: var(--fn-surface-4);
  border: 1px solid var(--fn-border-2);
  border-radius: var(--fn-radius-md);
  color: var(--fn-text);
  font-family: var(--fn-font-body);
  font-size: var(--fn-text-base);
  outline: none;
  transition: border-color var(--fn-duration-fast) var(--fn-ease-out);
}
.fn-input:focus { border-color: var(--fn-brand); box-shadow: 0 0 0 3px var(--fn-brand-dim); }
.fn-input::placeholder { color: var(--fn-text-4); }

/* Cards */
.fn-card {
  background: var(--fn-surface-1);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-lg);
  padding: var(--fn-space-5);
}
.fn-card-elevated { background: var(--fn-surface-2); box-shadow: var(--fn-shadow-md); }

/* Badges */
.fn-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--fn-space-2);
  border-radius: var(--fn-radius-xs);
  font-family: var(--fn-font-mono);
  font-size: var(--fn-text-xs);
  font-weight: var(--fn-weight-semi);
  letter-spacing: var(--fn-tracking-wide);
  text-transform: uppercase;
}
.fn-badge-brand   { background: var(--fn-brand-dim); color: var(--fn-brand); }
.fn-badge-success { background: var(--fn-success-dim); color: var(--fn-success); }
.fn-badge-warning { background: var(--fn-warning-dim); color: var(--fn-warning); }
.fn-badge-error   { background: var(--fn-error-dim); color: var(--fn-error); }
.fn-badge-info    { background: var(--fn-info-dim); color: var(--fn-info); }
.fn-badge-dim     { background: var(--fn-surface-3); color: var(--fn-text-3); }

/* Logo mark inline */
.fn-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--fn-radius-md);
  background: var(--fn-bg);
  color: var(--fn-brand);
  font-family: var(--fn-font-display);
  font-weight: var(--fn-weight-extra);
  font-size: 16px;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--fn-brand);
  outline-offset: 2px;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fn-bg); }
::-webkit-scrollbar-thumb { background: var(--fn-border-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--fn-border-3); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}