/**
 * JoinIn Design Tokens
 * CSS custom properties extracted from HTML mockups
 * Copyright (c) 2026 JoinIn AI, Inc. All rights reserved.
 */

:root {
  /* ============================================================================
   * Brand Colors
   * ============================================================================ */
  --join-cyan: #48D3FD;
  --join-sky: #5FA7FA;
  --join-indigo: #7A6EF5;
  --join-violet: #8D45F0;
  --join-magenta: #AA0EEB;
  --join-midnight: #00001A;

  /* ============================================================================
   * Status Colors (Glanceable / Semantic)
   * ============================================================================ */
  --status-ok: #22C55E;           /* green - success/ready/on */
  --status-warn: #F59E0B;         /* amber - attention/gated */
  --status-bad: #EF4444;          /* red - error/blocked/off */
  --status-info: #3B82F6;         /* blue - status/info */
  --status-neutral: #94A3B8;      /* slate - default/inactive */

  /* Status backgrounds (light theme) */
  --status-ok-bg: rgba(34, 197, 94, 0.10);
  --status-warn-bg: rgba(245, 158, 11, 0.12);
  --status-bad-bg: rgba(239, 68, 68, 0.12);
  --status-info-bg: rgba(59, 130, 246, 0.10);
  --status-neutral-bg: rgba(148, 163, 184, 0.10);

  /* ============================================================================
   * Spacing (8pt Grid)
   * ============================================================================ */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3rem;       /* 48px */
  --space-2xl: 4rem;      /* 64px */

  /* ============================================================================
   * Border Radius
   * ============================================================================ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* ============================================================================
   * Typography
   * ============================================================================ */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;

  --text-xs: 0.72rem;     /* 11.5px - kickers/labels */
  --text-sm: 0.75rem;     /* 12px - chips/small text */
  --text-base: 0.875rem;  /* 14px - body text */
  --text-md: 1rem;        /* 16px - default */
  --text-lg: 1.05rem;     /* 16.8px - panel titles */
  --text-xl: 1.25rem;     /* 20px - section headers */
  --text-2xl: 1.5rem;     /* 24px - page titles */
  --text-3xl: 1.6rem;     /* 25.6px - meeting title */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.10em;

  /* ============================================================================
   * Light Theme Neutrals (default)
   * ============================================================================ */
  --bg: #F7FAFF;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #E2E6F3;
  --bg-muted: rgba(226, 230, 243, 0.35);
  --text-main: #2B3148;
  --text-soft: #6F7794;
  --text-faint: #9AA1BC;
  --border-subtle: #E2E6F3;
  --border-strong: rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.07);
  --shadow-medium: 0 12px 24px rgba(0, 0, 0, 0.10);

  /* ============================================================================
   * Component-Specific Tokens
   * ============================================================================ */

  /* Chip tokens */
  --chip-ok-color: var(--status-ok);
  --chip-ok-bg: var(--status-ok-bg);
  --chip-ok-border: rgba(34, 197, 94, 0.45);

  --chip-warn-color: var(--status-warn);
  --chip-warn-bg: var(--status-warn-bg);
  --chip-warn-border: rgba(245, 158, 11, 0.45);

  --chip-bad-color: var(--status-bad);
  --chip-bad-bg: var(--status-bad-bg);
  --chip-bad-border: rgba(239, 68, 68, 0.50);

  --chip-info-color: var(--status-info);
  --chip-info-bg: var(--status-info-bg);
  --chip-info-border: rgba(59, 130, 246, 0.45);

  /* Button tokens */
  --btn-bg: rgba(0, 0, 0, 0.02);
  --btn-border: var(--border-subtle);
  --btn-primary-bg: linear-gradient(135deg, rgba(122, 110, 245, 0.20), rgba(72, 211, 253, 0.12));
  --btn-primary-border: rgba(122, 110, 245, 0.55);
  --btn-danger-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.20), rgba(170, 14, 235, 0.10));
  --btn-danger-border: rgba(239, 68, 68, 0.60);

  /* Tab tokens */
  --tab-bg: rgba(255, 255, 255, 0.55);
  --tab-active-bg: linear-gradient(135deg, rgba(122, 110, 245, 0.20), rgba(72, 211, 253, 0.12));
  --tab-active-border: rgba(72, 211, 253, 0.45);
  --tab-active-shadow: 0 8px 22px rgba(72, 211, 253, 0.08);
  --tab-gradient: linear-gradient(90deg, var(--join-cyan), var(--join-magenta));

  /* Card tokens */
  --card-bg: var(--bg-elevated);
  --card-border: var(--border-subtle);
  --card-shadow: var(--shadow-soft);
  --card-radius: var(--radius-xl);

  /* Callout tokens */
  --callout-bg: var(--bg-muted);
  --callout-border: var(--border-subtle);
  --callout-radius: var(--radius-lg);

  /* Input tokens */
  --input-bg: rgba(255, 255, 255, 0.75);
  --input-border: var(--border-subtle);
  --input-radius: var(--radius-lg);
  --input-focus-border: var(--join-indigo);

  /* Meeting hero tokens */
  --hero-bg: linear-gradient(135deg, rgba(72, 211, 253, 0.18), rgba(170, 14, 235, 0.30)), var(--join-midnight);
  --hero-overlay: radial-gradient(circle at top right, rgba(0, 0, 0, 0.35), transparent 60%);

  /* Transcript tokens */
  --transcript-line-border: rgba(226, 230, 243, 0.65);
  --transcript-speaker-width: 92px;

  /* Feedback mini-chip tokens */
  --mini-chip-border: rgba(154, 161, 188, 0.55);
  --mini-chip-selected-bg: rgba(59, 130, 246, 0.15);
  --mini-chip-selected-border: rgba(59, 130, 246, 0.45);

  /* Connection status tokens */
  --connection-connected: var(--status-ok);
  --connection-connecting: var(--status-warn);
  --connection-disconnected: var(--status-bad);
  --connection-error: var(--status-bad);
}

/* ============================================================================
 * Dark Theme Overrides
 * ============================================================================ */
html[data-theme="dark"] {
  /* Neutrals */
  --bg: #050513;
  --bg-elevated: #0E1024;
  --bg-subtle: #181A34;
  --bg-muted: rgba(24, 26, 52, 0.55);
  --text-main: #F8FAFF;
  --text-soft: #9FA5CF;
  --text-faint: #6F7794;
  --border-subtle: #262A4A;
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-medium: 0 20px 48px rgba(0, 0, 0, 0.55);

  /* Status backgrounds (dark theme) */
  --status-ok-bg: rgba(34, 197, 94, 0.14);
  --status-warn-bg: rgba(245, 158, 11, 0.16);
  --status-bad-bg: rgba(239, 68, 68, 0.16);
  --status-info-bg: rgba(59, 130, 246, 0.14);
  --status-neutral-bg: rgba(148, 163, 184, 0.14);

  /* Button tokens */
  --btn-bg: rgba(255, 255, 255, 0.06);

  /* Tab tokens */
  --tab-bg: rgba(255, 255, 255, 0.06);

  /* Callout tokens */
  --callout-bg: var(--bg-muted);

  /* Input tokens */
  --input-bg: rgba(255, 255, 255, 0.06);

  /* Transcript tokens */
  --transcript-line-border: rgba(38, 42, 74, 0.8);
}