/* ============================================================
 * DEF by Flowstate — Brand / Design System (production)
 * The single source of truth for fonts, colors, radius, shadows.
 * Served at /css/brand.css. Link this in EVERY public page.
 * Dark mode is default. Every color serves a function.
 * Mirrors app/preview/assets/flowstate-tokens.css.
 * ============================================================ */

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

:root {
  /* === PRIMARY PALETTE === */
  --void:          #0A0A0F;  /* Primary background — 70% usage */
  --white:         #F5F5F7;  /* Primary text on dark — 15% */
  --signal:        #0066FF;  /* Accent / CTA / action — 10% */
  --signal-hover:  #0052CC;
  --signal-dim:    rgba(0,102,255,0.08);
  --signal-glow:   rgba(0,102,255,0.15);

  /* === SECONDARY === */
  --purple:        #7B2FBE;  /* Premium / gradients — 5% */
  --purple-hover:  #6A28A3;
  --grid:          #1A1A2E;  /* Card bg / secondary surface */
  --steel:         #8A8A9A;  /* Secondary text, metadata */
  --steel-dark:    #7A7A8A;
  --steel-d:       #5A5A6A;

  /* === SEMANTIC (status) === */
  --green:  #22C55E;
  --amber:  #EAB308;
  --red:    #EF4444;
  --blue:   #3B82F6;

  /* === GLASS SYSTEM === */
  --glass-bg:            rgba(255,255,255,0.03);
  --glass-border:        rgba(255,255,255,0.08);
  --glass-border-strong: rgba(255,255,255,0.10);
  --glass-hover-bg:      rgba(255,255,255,0.05);
  --glass-hover-border:  rgba(255,255,255,0.14);
  --glass-blur:          20px;
  --glass-blur-sm:       12px;

  --signal-tint:  rgba(0,102,255,0.18);
  --purple-tint:  rgba(123,47,190,0.15);

  /* === GRADIENT === */
  --flow-gradient:   linear-gradient(135deg, #0066FF 0%, #7B2FBE 100%);
  --signal-gradient: linear-gradient(135deg, #0066FF, #3D99FF);

  /* === SEMANTIC COLOR ALIASES === */
  --bg:         var(--void);
  --bg-elev-1:  var(--grid);
  --fg:         var(--white);
  --fg-1:       var(--white);
  --fg-2:       var(--steel);
  --fg-3:       var(--steel-dark);
  --fg-4:       var(--steel-d);
  --accent:     var(--signal);
  --border:     var(--glass-border);

  /* === TYPEFACES === */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-display: var(--font-primary);
  --font-body:    var(--font-primary);

  /* === WEIGHTS === */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* === LETTER SPACING === */
  --ls-tight:   -0.03em;
  --ls-tighter: -0.04em;
  --ls-mono:     0.15em;
  --ls-upper:    0.08em;

  /* === LINE HEIGHT === */
  --lh-display: 1.1;
  --lh-body:    1.6;
  --lh-loose:   1.7;

  /* === RADIUS === */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* standard card */
  --radius-xl:   20px;
  --radius-pill: 100px;  /* buttons, nav, chips */

  /* === SHADOWS === */
  --shadow-sm:        0 4px 20px rgba(0,0,0,0.3);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.3);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.4);
  --shadow-signal:    0 0 40px rgba(0,102,255,0.25);
  --shadow-signal-sm: 0 0 30px rgba(0,102,255,0.06);
  --shadow-purple:    0 0 40px rgba(123,47,190,0.25);

  /* === EASING === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === BASE === */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === GRADIENT TEXT HELPERS === */
.gt-signal {
  background: var(--signal-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gt-flow {
  background: var(--flow-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}