/* =============================================================================
   CashCatalyst — Agent-first UI Design Tokens
   tokens.css — CSS custom properties (load before style.css)

   Visual language: cool slate + a single electric-blue accent.
   Light, hairline-based, near-flat. No purple, no gradients.
   Token NAMES are unchanged from the previous system — only values changed —
   so every existing template/stylesheet retokenizes automatically.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COLORS — Primary (Electric Blue)   was: Indigo
  --------------------------------------------------------------------------- */
  --color-primary-50:  #ECF1FF;
  --color-primary-100: #D8E3FF;
  --color-primary-200: #B0C6FF;
  --color-primary-300: #84A4FF;
  --color-primary-400: #4B7DFF;
  --color-primary-500: #1E63FF;
  --color-primary-600: #0F5BFF;   /* the accent */
  --color-primary-700: #0A47CC;
  --color-primary-800: #0A3A9E;
  --color-primary-900: #0B2C73;

  /* COLORS — Cyan (live / agent pulse) */
  --color-cyan-400: #2DD4E0;
  --color-cyan-500: #14B8C4;
  --color-cyan-600: #0E97A1;
  --color-cyan-700: #0B7A82;

  /* COLORS — Emerald (inflow / positive) */
  --color-emerald-400: #34D9A0;
  --color-emerald-500: #0E9F6E;
  --color-emerald-600: #0B7D57;
  --color-emerald-700: #085F42;

  /* COLORS — Neutral (cool slate) */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F8FA;   /* panel */
  --color-neutral-100: #F0F2F6;   /* hairline-2 */
  --color-neutral-200: #E9ECF1;   /* hairline */
  --color-neutral-300: #D4D9E2;
  --color-neutral-400: #98A1B2;
  --color-neutral-500: #687385;
  --color-neutral-600: #4A5563;
  --color-neutral-700: #2A3242;
  --color-neutral-800: #161D2B;
  --color-neutral-900: #0B1020;   /* ink */

  /* COLORS — Semantic */
  --color-success-light: #E7F6EF;
  --color-success:       #0E9F6E;
  --color-success-dark:  #0A7D55;

  --color-warning-light: #FEF3C7;
  --color-warning:       #E0A106;
  --color-warning-dark:  #B45309;

  --color-danger-light:  #FCEDED;
  --color-danger:        #E5484D;
  --color-danger-dark:   #B5363A;

  --color-info-light:    #ECF1FF;
  --color-info:          #0F5BFF;
  --color-info-dark:     #0A47CC;

  /* ---------------------------------------------------------------------------
     SURFACES — light chrome (sidebar & header are now white w/ hairline)
  --------------------------------------------------------------------------- */
  --surface-sidebar:          var(--color-neutral-0);
  --surface-header:           var(--color-neutral-0);
  --surface-app-bg:           var(--color-neutral-0);
  --surface-card:             var(--color-neutral-0);
  --surface-card-hover:       var(--color-neutral-50);
  --surface-input:            var(--color-neutral-0);
  --surface-input-focus:      var(--color-primary-50);
  --surface-chat-bg:          var(--color-neutral-50);
  --surface-chat-user:        var(--color-primary-600);
  --surface-chat-agent:       var(--color-neutral-0);
  --surface-chat-agent-border: var(--color-neutral-200);

  /* ---------------------------------------------------------------------------
     TEXT
  --------------------------------------------------------------------------- */
  --text-primary:    var(--color-neutral-900);
  --text-secondary:  var(--color-neutral-500);
  --text-muted:      var(--color-neutral-400);
  --text-inverse:    var(--color-neutral-0);
  --text-link:       var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);
  --text-success:    var(--color-success-dark);
  --text-danger:     var(--color-danger-dark);
  --text-warning:    var(--color-warning-dark);
  --text-on-primary: var(--color-neutral-0);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     - display: Space Grotesk (headings, logo, big numbers — the futuristic edge)
     - base:    Instrument Sans (body / UI — deliberately NOT Inter)
     - mono:    IBM Plex Mono (micro-labels, figures — the "terminal" texture)
  --------------------------------------------------------------------------- */
  --font-family-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-family-base:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-family-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;

  --font-size-xs:   0.64rem;
  --font-size-sm:   0.8rem;
  --font-size-base: 1rem;
  --font-size-md:   1.25rem;
  --font-size-lg:   1.563rem;
  --font-size-xl:   1.953rem;
  --font-size-2xl:  2.441rem;
  --font-size-3xl:  3.052rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight: 1.25;
  --line-height-base:  1.6;
  --line-height-loose: 1.8;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-base:  0;
  --letter-spacing-wide:  0.05em;

  /* ---------------------------------------------------------------------------
     SPACING
  --------------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------------------------------------------------------------------------
     LAYOUT
  --------------------------------------------------------------------------- */
  --sidebar-width:           240px;
  --sidebar-collapsed-width: 72px;
  --chat-panel-width:        360px;
  --header-height:           60px;
  --content-padding:         var(--space-6);
  --card-padding:            var(--space-5);
  --card-gap:                var(--space-5);

  /* ---------------------------------------------------------------------------
     BORDERS
  --------------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --border-width:       1px;
  --border-color:       var(--color-neutral-200);
  --border-color-focus: var(--color-primary-400);

  /* ---------------------------------------------------------------------------
     SHADOWS — near-flat; rely on hairlines, not drop shadows
  --------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(11, 16, 32, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(11, 16, 32, 0.05);
  --shadow-md: 0 4px 12px -4px rgba(11, 16, 32, 0.10);
  --shadow-lg: 0 24px 60px -28px rgba(11, 16, 32, 0.22);
  --shadow-focus: 0 0 0 3px rgba(15, 91, 255, 0.25);

  /* ---------------------------------------------------------------------------
     MOTION
  --------------------------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-colors: color var(--duration-fast) var(--ease-default),
                       background-color var(--duration-fast) var(--ease-default),
                       border-color var(--duration-fast) var(--ease-default);
  --transition-sidebar: width var(--duration-normal) var(--ease-default);
}