/* Ommly 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 {
  /* Ommly brand gradient */
  --ommly-cyan:   #00C8FC;
  --ommly-blue:   #2F6BFF;
  --ommly-violet: #6538FF;
  --gradient: linear-gradient(135deg, #00C8FC, #2F6BFF, #6538FF);

  /* Brand neutrals */
  --midnight-navy: #020817;
  --deep-navy:     #0B1220;
  --ommly-frost:   #F8FAFC;

  /* Primary — Ommly Blue */
  --primary:       #2F6BFF;
  --primary-hover: #2558E8;
  --primary-active:#1E45CC;
  --primary-soft:  #EEF2FF;
  --primary-border:#C7D7FF;

  /* Functional colours */
  --success:       #16B364;
  --success-soft:  #DCFCE7;
  --warning:       #F59E0B;
  --warning-soft:  #FEF3C7;
  --danger:        #EF4444;
  --danger-soft:   #FEE2E2;
  --info:          #3B82F6;
  --info-soft:     #DBEAFE;

  /* Neutral hierarchy */
  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --surface-hover: #F5F7FA;
  --surface-active:#EEF2FF;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --text:          #0B1220;
  --text-muted:    #475467;
  --text-subtle:   #667085;
  --text-invert:   #FFFFFF;

  /* Chat bubbles */
  --bubble-out:    #EEF2FF;
  --bubble-in:     #FFFFFF;
  --chat-canvas:   #F8FAFC;

  /* AI indicator — gradient for active AI states */
  --ai-gradient: linear-gradient(135deg, #00C8FC, #2F6BFF, #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 */
  --sh-sm: 0 1px 2px rgba(16,24,40,.05);
  --sh-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
  --sh-lg: 0 12px 24px -6px rgba(16,24,40,.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: 13px;
  --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;
  --lh-tight: 1.3; --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;
}