/* FashionAI Agent v2 — design tokens.
 * Brand colors come from /brand/css/brand.css when loaded into the iframe.
 * The chrome (this app shell) reproduces them locally. */

:root {
  /* Brand primaries (FashionAI manual) */
  --brand-sage:        #dce5ca;
  --brand-sage-light:  #eaf0dd;
  --brand-mint:        #b8d4a8;
  --brand-lime:        #d2ff41;
  --brand-navy:        #242b33;
  --brand-black:       #000000;
  --brand-white:       #ffffff;
  --brand-neutral-100: #f7f7f8;
  --brand-neutral-200: #ededef;
  --brand-neutral-300: #d3d3d3;
  --brand-neutral-400: #a8a8a8;
  --brand-neutral-500: #808080;
  --brand-neutral-600: #595958;
  --brand-neutral-700: #3a3a39;
  --brand-neutral-800: #222321;
  --brand-green:       #3fb950;
  --brand-red:         #f85149;
  --brand-yellow:      #d29922;

  /* Chrome derivatives */
  --bg-base:        var(--brand-navy);
  --bg-elevated:    #1c2229;
  --bg-card:        #2c333d;
  --bg-deep:        #181d22;
  --bg-bubble-user: #2c333d;
  --bg-preview:     var(--brand-neutral-100);

  --fg-primary:     var(--brand-neutral-200);
  --fg-secondary:   var(--brand-neutral-400);
  --fg-dim:         var(--brand-neutral-600);
  --fg-mono:        var(--brand-mint);
  --fg-error:       var(--brand-red);

  --accent:         var(--brand-lime);
  --accent-fg:      var(--brand-black);
  --accent-soft:    var(--brand-sage);

  --border:         var(--brand-neutral-700);
  --border-soft:    rgba(255, 255, 255, 0.08);
  --divider:        rgba(255, 255, 255, 0.06);

  /* Type */
  --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'Cascadia Code', monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radii (from brand.css) */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Motion */
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 360ms;
}