/* theme.css - Linear-inspired design system for FindBestCRM
 * Based on DESIGN.md extracted from linear.app
 * Dark-mode native with light mode toggle support
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* background surfaces */
  --color-bg: #08090a;
  --color-bg-alt: #0f1011;
  --color-bg-card: rgba(255,255,255,0.02);
  --color-bg-elevated: #191a1b;
  --color-bg-secondary: #28282c;

  /* text */
  --color-text: #f7f8f8;
  --color-text-secondary: #d0d6e0;
  --color-text-muted: #8a8f98;
  --color-text-faint: #62666d;
  --color-text-inverse: #08090a;

  /* brand / accent */
  --color-primary: #5e6ad2;
  --color-accent: #7170ff;
  --color-accent-hover: #828fff;
  --color-primary-muted: #7a7fad;

  /* status */
  --color-success: #27a644;
  --color-success-alt: #10b981;

  /* borders */
  --color-border: rgba(255,255,255,0.05);
  --color-border-standard: rgba(255,255,255,0.08);
  --color-border-solid: #23252a;
  --color-border-solid-2: #34343a;
  --color-border-solid-3: #3e3e44;

  /* overlay */
  --color-overlay: rgba(0,0,0,0.85);

  /* typography */
  --font-heading: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-feature: "cv01", "ss03";

  /* spacing - 8px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* radius - linear scale */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* shadows */
  --shadow-sm: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;
  --shadow-md: rgba(0,0,0,0.2) 0px 0px 0px 1px;
  --shadow-lg: rgba(0,0,0,0.4) 0px 2px 4px;
  --shadow-inset: rgba(0,0,0,0.2) 0px 0px 12px 0px inset;
  --shadow-dialog: rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px;
}

/* light mode */
[data-theme="light"] {
  --color-bg: #f7f8f8;
  --color-bg-alt: #f3f4f5;
  --color-bg-card: #ffffff;
  --color-bg-elevated: #f5f6f7;
  --color-bg-secondary: #e8e9eb;
  --color-text: #08090a;
  --color-text-secondary: #3b3f45;
  --color-text-muted: #62666d;
  --color-text-faint: #8a8f98;
  --color-text-inverse: #f7f8f8;
  --color-border: rgba(0,0,0,0.08);
  --color-border-standard: rgba(0,0,0,0.12);
  --color-border-solid: #d0d6e0;
  --color-border-solid-2: #e6e6e6;
  --color-bg-card: #ffffff;
  --shadow-md: rgba(0,0,0,0.06) 0px 1px 3px, rgba(0,0,0,0.04) 0px 1px 2px;
  --shadow-lg: rgba(0,0,0,0.08) 0px 4px 12px;
}

/* global type settings */
body {
  font-family: var(--font-body);
  font-feature-settings: var(--font-feature);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-feature-settings: var(--font-feature);
  color: var(--color-text);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--color-accent-hover);
}