/* Connect Brand Guidelines V1.2 — design tokens + self-hosted Inter */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Connect brand gradient */
  --connect-cyan:   #00C8FC;
  --connect-blue:   #1A9756;
  --connect-violet: #6538FF;
  --gradient: linear-gradient(135deg, #00C8FC, #1A9756, #6538FF);

  /* Brand neutrals */
  --midnight-navy: #020817;
  --deep-navy:     #0F172A;
  --connect-frost:   #F7F5F3;

  /* Primary — Connect Green */
  --primary:       #1A9756;
  --primary-hover: #178A4D;
  --primary-active:#136F3E;
  --primary-soft:  #E8F5EE;
  --primary-border:#A8D4BC;
  /* Text/icons on filled primary */
  --on-primary:    #FFFFFF;
  /* Active nav / tab / filter chip — filled primary */
  --active-bg:     var(--primary);
  --active-fg:     var(--on-primary);

  /* Functional colours */
  --success:       #10B981;
  --success-soft:  #D1FAE5;
  --success-text:  #047857;
  --warning:       #F59E0B;
  --warning-soft:  #FEF3C7;
  --warning-text:  #B45309;
  --danger:        #EF4444;
  --danger-hover:  #DC2626;
  --danger-active: #B91C1C;
  --danger-soft:   #FEE2E2;
  --danger-text:   #B91C1C;
  --info:          #3B82F6;
  --info-soft:     #DBEAFE;
  --info-text:     #1D4ED8;

  /* Neutral hierarchy */
  --bg:            #F7F5F3;
  --surface:       #FFFFFF;
  --surface-hover: #F1F5F9;
  --surface-active:#E8F5EE;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --text:          #0F172A;
  --text-muted:    #475569;
  --text-subtle:   #64748B;
  --text-invert:   #FFFFFF;

  /* Chat bubbles */
  --bubble-out:    #E8F5EE;
  --bubble-in:     #FFFFFF;
  --chat-canvas:   #F7F5F3;

  /* AI indicator — gradient for active AI states */
  --ai-gradient: linear-gradient(135deg, #00C8FC, #1A9756, #6538FF);

  /* Spacing — 8px base per brand guidelines */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius — 8–12px per brand */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* Shadow — soft SaaS elevation */
  --sh-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --sh-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --sh-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.12);

  /* Transitions — 150–250ms per brand motion spec */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 250ms ease;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px;
  --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;
  --lh-tight: 1.25; --lh-base: 1.5;

  /* Layout */
  --rail-w: 110px;
  --rail-w-collapsed: 64px;
  --chatlist-w: 430px;
  --header-h: 72px;
  --z-drawer: 200; --z-modal: 300; --z-toast: 400;

  /* Aliases — requested design-system names + page CSS compatibility */
  --brand-primary:        var(--primary);
  --brand-primary-hover:  var(--primary-hover);
  --brand-primary-soft:   var(--primary-soft);
  --color-primary:        var(--primary);
  --text-primary:         var(--text);
  --text-secondary:       var(--text-muted);
  --bg-page:              var(--bg);
  --bg-surface:           var(--surface);
  --bg-muted:             #F1F5F9;
  --border-default:       var(--border);
  --border-subtle:        #F1F5F9;
  --radius:               var(--r-lg);
  --radius-sm:            var(--r-sm);
  --radius-md:            var(--r-md);
  --radius-lg:            var(--r-lg);
  --shadow-sm:            var(--sh-sm);
  --shadow-md:            var(--sh-md);
  --space-1:              var(--sp-1);
  --space-2:              var(--sp-2);
  --space-3:              var(--sp-3);
  --space-4:              var(--sp-4);
  --space-5:              var(--sp-5);
  --space-6:              var(--sp-6);
  --text-base:            var(--fs-base);
  --text-sm:              var(--fs-sm);
  --text-xs:              var(--fs-xs);
  --surface-muted:        var(--bg-muted);
}