/* ============================================================
   FLOW IMD — Design System Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   COLOR TOKENS — Base Palette
   ------------------------------------------------------------ */
:root {
  /* Backgrounds */
  --bg-base:         #0B0C10;   /* deepest canvas bg */
  --bg-canvas:       #0D0F14;   /* node canvas surface */
  --bg-surface:      #1F2833;   /* node cards, panels */
  --bg-surface-2:    #222D3D;   /* nested surfaces */
  --bg-elevated:     #2A3548;   /* hover, active nodes */
  --bg-overlay:      rgba(0,0,0,0.7); /* modal backdrop */
  --bg-blur:         rgba(15,18,28,0.85); /* glass panels */

  /* Borders */
  --border:          #2E3D52;   /* default borders */
  --border-subtle:   #1A2538;   /* subtle dividers */
  --border-strong:   #3D5270;   /* emphasized borders */
  --border-accent:   rgba(102,252,241,0.4); /* selected node border */

  /* Foreground / Text */
  --fg-primary:      #C5C6C7;   /* primary text */
  --fg-secondary:    #8A9BB0;   /* labels, secondary */
  --fg-muted:        #4A5568;   /* placeholder, disabled */
  --fg-inverse:      #0B0C10;   /* text on accent bg */
  --fg-on-accent:    #0B0C10;   /* text on cyan buttons */

  /* Brand Accent */
  --accent-cyan:     #66FCF1;   /* primary accent — connector lines, CTAs */
  --accent-cyan-dim: #45A29E;   /* secondary — hover teal */
  --accent-purple:   #7B4FD4;   /* logo purple */
  --accent-blue:     #2E9DF7;   /* logo blue gradient */
  --accent-gradient: linear-gradient(135deg, #7B4FD4 0%, #2E9DF7 50%, #66FCF1 100%);

  /* Node type colors */
  --node-input:      #2E9DF7;   /* input node accent */
  --node-process:    #7B4FD4;   /* AI processing node accent */
  --node-output:     #66FCF1;   /* output node accent */

  /* Semantic / Status */
  --success:         #4ADE80;
  --success-bg:      rgba(74,222,128,0.1);
  --warning:         #FBBF24;
  --warning-bg:      rgba(251,191,36,0.1);
  --error:           #F87171;
  --error-bg:        rgba(248,113,113,0.1);
  --info:            #60A5FA;
  --info-bg:         rgba(96,165,250,0.1);
  --running:         #66FCF1;
  --running-bg:      rgba(102,252,241,0.1);
}

/* ------------------------------------------------------------
   TYPOGRAPHY TOKENS
   ------------------------------------------------------------ */
:root {
  /* Font families */
  --font-display:  'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  48px;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-caps:     0.12em;
}

/* Semantic type roles */
:root {
  --type-h1:         var(--font-display); /* 32–48px, semibold, display */
  --type-h2:         var(--font-display); /* 24px, semibold */
  --type-h3:         var(--font-display); /* 18px, medium */
  --type-label:      var(--font-body);    /* 12px, medium, --ls-wide */
  --type-body:       var(--font-body);    /* 13–14px, regular */
  --type-caption:    var(--font-body);    /* 11px, regular, muted */
  --type-code:       var(--font-mono);    /* 12px, prompt/api inputs */
  --type-badge:      var(--font-body);    /* 10–11px, semibold, caps */
}

/* ------------------------------------------------------------
   SPACING TOKENS
   ------------------------------------------------------------ */
:root {
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
}

/* ------------------------------------------------------------
   BORDER RADIUS TOKENS
   ------------------------------------------------------------ */
:root {
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
}

/* ------------------------------------------------------------
   SHADOW & ELEVATION TOKENS
   ------------------------------------------------------------ */
:root {
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:      0 4px 16px rgba(0,0,0,0.5);
  --shadow-xl:      0 8px 32px rgba(0,0,0,0.6);
  --shadow-panel:   0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(46,61,82,0.8);
  --shadow-node-selected: 0 0 0 2px #66FCF1, 0 4px 24px rgba(102,252,241,0.15);
  --shadow-glow-cyan:     0 0 12px rgba(102,252,241,0.35);
  --shadow-glow-purple:   0 0 12px rgba(123,79,212,0.35);
}

/* ------------------------------------------------------------
   ANIMATION TOKENS
   ------------------------------------------------------------ */
:root {
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   100ms;
  --dur-base:   150ms;
  --dur-slow:   250ms;
  --dur-slower: 400ms;
}

/* ------------------------------------------------------------
   SEMANTIC ELEMENT STYLES (apply globally)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-6);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-cyan);
  background: rgba(102,252,241,0.06);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

pre {
  padding: var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--border);
}

label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--fg-secondary);
  text-transform: uppercase;
}

small, .caption {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

/* Scrollbar (dark themed) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }