/* ======================== */
/* FF Design System Tokens  */
/* ======================== */
:root {
  /* Primary - Strictly Black & Gray Scale */
  --primary: #0F172A; /* Slate 900 */
  --primary-dark: #020617; /* Slate 950 */
  --primary-light: #334155; /* Slate 700 */
  --primary-pale: #F1F5F9; /* Slate 100 */
  --primary-ghost: #F8FAFC; /* Slate 50 */

  /* Accents */
  --accent-coral: #E11D48;
  --accent-amber: #D97706;
  --accent-green: #10B981;
  --accent-purple: #8B5CF6;

  /* Backgrounds */
  --bg-app: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-sunken: #F8FAFC; /* Slight contrast for inputs/cards */
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(15, 23, 42, 0.4); /* Slate 900 with opacity */
  --bg-image: none;
  --bg-overlay-opacity: 0;

  /* Borders */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --divider: #F1F5F9;

  /* Text - High Contrast */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-placeholder: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-link: #2563EB; /* subtle blue link */
  --text-error: #EF4444;
  --text-success: #10B981;

  /* Status */
  --online: #10B981;
  --away: #F59E0B;
  --offline: #94A3B8;

  /* Typography */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Nunito', sans-serif;

  --text-xs: clamp(10px, 0.6875rem, 12px);
  --text-sm: clamp(12px, 0.8125rem, 14px);
  --text-base: clamp(14px, 0.9375rem, 16px);
  --text-md: clamp(15px, 1.0625rem, 18px);
  --text-lg: clamp(18px, 1.25rem, 22px);
  --text-xl: clamp(20px, 1.5rem, 26px);
  --text-2xl: clamp(24px, 1.875rem, 34px);
  --text-3xl: clamp(30px, 2.375rem, 42px);

  --lh-xs: 16px;
  --lh-sm: 18px;
  --lh-base: 22px;
  --lh-md: 24px;
  --lh-lg: 28px;
  --lh-xl: 32px;
  --lh-2xl: 38px;
  --lh-3xl: 46px;

  /* Spacing */
  --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 - Sleek Modern (Rounded Update) */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;
  --r-clay: 24px;
  --r-msg-out: 20px 20px 4px 20px;
  --r-msg-in: 20px 20px 20px 4px;

  /* Shadows - Minimal & Fast (No costly multi-layered clay offsets) */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-clay: var(--shadow-sm); /* Replace heavy clay with clean drop shadow */
  --shadow-clay-inset: inset 0 2px 4px 0 rgba(0,0,0,0.06);
  --shadow-clay-btn: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);

  /* Chat bubble colors */
  --msg-out-bg: #0F172A;
  --msg-out-text: #FFFFFF;
  --msg-in-bg: #F1F5F9;
  --msg-in-text: #0F172A;
  --msg-time: #64748B;

  /* Accent with color */
  --accent-blue: #3D7EFF;
  --accent-green-live: #22C55E;
  --accent-red: #EF4444;
  --accent-orange: #F97316;

  /* Transitions */
  --transition-fast: 150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-spring);
}

/* Dark Mode */
[data-theme="dark"] {
  --primary: #F8FAFC;
  --primary-dark: #E2E8F0;
  --primary-light: #94A3B8;
  --primary-pale: #1E293B;
  --primary-ghost: #0F172A;

  --accent-coral: #FB7185;
  --accent-amber: #FBBF24;
  --accent-green: #34D399;
  --accent-purple: #A78BFA;

  --bg-app: #020617; /* Very deep slate */
  --bg-surface: #0F172A; /* Slate 900 */
  --bg-elevated: #1E293B; /* Slate 800 */
  --bg-sunken: #020617;
  --border: #1E293B;
  --border-strong: #334155;
  --divider: #1E293B;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-placeholder: #475569;
  --text-inverse: #020617;
  --text-link: #60A5FA;
  --text-error: #FB7185;
  --text-success: #34D399;
  
  --bg-overlay: rgba(2,6,23,0.7); /* Deep dark overlay */
  
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.5);
  --shadow-clay: var(--shadow-sm);
  --shadow-clay-inset: inset 0 2px 4px 0 rgba(0,0,0,0.5);
  --shadow-clay-btn: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.5);

  --msg-out-bg: #F8FAFC;
  --msg-out-text: #020617;
  --msg-in-bg: #1E293B;
  --msg-in-text: #F8FAFC;
  --msg-time: #64748B;
}

/* Telegram Dark Theme — Premium Messaging Style */
[data-theme="telegram"] {
  --primary: #5B9BD5;
  --primary-dark: #4A8BC4;
  --primary-light: #6CAAE0;
  --primary-pale: rgba(91,155,213,0.15);
  --primary-ghost: rgba(91,155,213,0.08);

  --accent-coral: #E06C75;
  --accent-amber: #E5C07B;
  --accent-green: #98C379;
  --accent-purple: #C678DD;

  --bg-app: #0E1621;
  --bg-surface: #17212B;
  --bg-elevated: #1E2C3A;
  --bg-sunken: #0A1018;
  --border: #242F3D;
  --border-strong: #2E3D4F;
  --divider: #1C2733;

  --text-primary: #F5F5F5;
  --text-secondary: #8E9BA8;
  --text-muted: #6C7883;
  --text-placeholder: #4E5D6B;
  --text-inverse: #0E1621;
  --text-link: #5B9BD5;
  --text-error: #E06C75;
  --text-success: #98C379;

  --online: #5B9BD5;
  --away: #E5C07B;
  --offline: #4E5D6B;

  --bg-overlay: rgba(0,0,0,0.7);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-clay: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-clay-inset: inset 0 2px 4px rgba(0,0,0,0.3);
  --shadow-clay-btn: 0 2px 8px rgba(0,0,0,0.3);

  --msg-out-bg: #2B5278;
  --msg-out-text: #FFFFFF;
  --msg-in-bg: #182533;
  --msg-in-text: #F5F5F5;
  --msg-time: #6C7883;

  --accent-blue: #5B9BD5;
  --accent-green-live: #98C379;
  --accent-red: #E06C75;
  --accent-orange: #D19A66;
}