/* ChatticaAI Design Tokens */
/* Based on app theme from src/theme/tokens.ts */

:root {
  /* Colors - Dark Mode (Default) */
  --color-primary: #E66128;
  --color-bg-dark: #171717;
  --color-surface-dark: #1F1F1F;
  --color-text-dark: #F2EEE9;
  --color-text-muted: #A89B8C;
  --color-border-dark: #2A2A2A;
  
  /* Subscription Badges */
  --color-plus: #4A90E2;
  --color-premium: #E66128;
  
  /* Spacing Scale (matching app) */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-section: 80px;
  
  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  
  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  
  /* Font Sizes */
  --text-display: 2.125rem;  /* 34px */
  --text-h1: 1.75rem;        /* 28px */
  --text-h2: 1.375rem;       /* 22px */
  --text-h3: 1.125rem;       /* 18px */
  --text-body-lg: 1.125rem;  /* 18px */
  --text-body: 1rem;         /* 16px */
  --text-small: 0.875rem;    /* 14px */
  --text-caption: 0.8125rem; /* 13px */
  
  /* Line Heights */
  --line-display: 2.5rem;    /* 40px */
  --line-h1: 2rem;           /* 32px */
  --line-h2: 1.75rem;        /* 28px */
  --line-body: 1.5rem;       /* 24px */
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  
  /* Breakpoints (for reference in media queries) */
  /* Mobile: < 900px */
  /* Tablet: 900px - 1200px */
  /* Desktop: > 1200px */
  --container-max-width: 1200px;
}

/* Light Theme */
body.theme-light {
  --color-bg-dark: #F2EEE9;
  --color-surface-dark: #FFFFFF;
  --color-text-dark: #171717;
  --color-text-muted: #5A5A5A;
  --color-border-dark: #E0E0E0;
}

/* Sepia Theme */
body.theme-sepia {
  --color-bg-dark: #3C2D28;
  --color-surface-dark: #4A3B36;
  --color-text-dark: #E8DDD1;
  --color-text-muted: #B5A89A;
  --color-border-dark: #5A4B46;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-text-dark);
  background-color: var(--color-bg-dark);
  transition: background-color var(--transition-medium), color var(--transition-medium);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Typography Classes */
.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--line-display);
  color: var(--color-text-dark);
}

.heading-1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--line-h1);
  color: var(--color-text-dark);
}

.heading-2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--line-h2);
  color: var(--color-text-dark);
}

.heading-3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-dark);
}

.body-large {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--line-body);
  color: var(--color-text-dark);
}

.body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-text-dark);
}

.body-muted {
  color: var(--color-text-muted);
}

.small {
  font-size: var(--text-small);
}

.caption {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}