/* Design Tokens - Shared between home page and logged-in app
 * Ensures visual consistency across marketing and product experiences
 */

:root {
  /* === COLORS === */
  /* Backgrounds */
  --ts-bg-primary: #0b0f17;
  --ts-bg-secondary: #020617;
  --ts-bg-surface: rgba(255, 255, 255, 0.06);
  --ts-bg-panel: rgba(255, 255, 255, 0.06);
  
  /* Text */
  --ts-text-primary: rgba(255, 255, 255, 0.92);
  --ts-text-secondary: rgba(255, 255, 255, 0.70);
  --ts-text-muted: rgba(255, 255, 255, 0.50);
  
  /* Borders */
  --ts-border-primary: rgba(255, 255, 255, 0.12);
  --ts-border-secondary: rgba(255, 255, 255, 0.08);
  --ts-border-subtle: rgba(148, 163, 184, 0.25);
  
  /* Accent colors (aurora palette) */
  --ts-accent-blue: #38bdf8;
  --ts-accent-purple: #818cf8;
  --ts-accent-teal: #5eead4;
  --ts-accent-violet: #a78bfa;
  
  /* Button backgrounds */
  --ts-btn-bg: rgba(255, 255, 255, 0.10);
  --ts-btn-bg-hover: rgba(255, 255, 255, 0.16);
  --ts-btn-border: rgba(255, 255, 255, 0.16);
  --ts-btn-primary-bg: linear-gradient(135deg, #2563eb, #38bdf8);
  
  /* === SPACING === */
  /* Base unit: 8px increments */
  --ts-spacing-xs: 0.5rem;    /* 8px */
  --ts-spacing-sm: 0.75rem;   /* 12px */
  --ts-spacing-md: 1rem;      /* 16px */
  --ts-spacing-lg: 1.5rem;    /* 24px */
  --ts-spacing-xl: 2rem;      /* 32px */
  --ts-spacing-2xl: 3rem;     /* 48px */
  --ts-spacing-3xl: 4rem;     /* 64px */
  
  /* === BORDER RADIUS === */
  --ts-radius-sm: 10px;
  --ts-radius-md: 14px;
  --ts-radius-lg: 18px;
  --ts-radius-xl: 24px;
  --ts-radius-full: 999px;
  
  /* === SHADOWS === */
  --ts-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --ts-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.25);
  --ts-shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.35);
  --ts-shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.45);
  
  /* === TYPOGRAPHY === */
  /* Font stack */
  --ts-font-family: "Sora", "Space Grotesk", "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  
  /* Font sizes (using clamp for responsive scaling) */
  --ts-font-xs: clamp(0.7rem, 1vw, 0.75rem);
  --ts-font-sm: clamp(0.8rem, 1.2vw, 0.9rem);
  --ts-font-base: clamp(0.9rem, 1.4vw, 1rem);
  --ts-font-lg: clamp(1rem, 1.6vw, 1.125rem);
  --ts-font-xl: clamp(1.25rem, 2vw, 1.5rem);
  --ts-font-2xl: clamp(1.5rem, 3vw, 2rem);
  --ts-font-3xl: clamp(2rem, 4vw, 2.5rem);
  --ts-font-4xl: clamp(2.5rem, 5vw, 3.5rem);
  
  /* Line heights */
  --ts-leading-tight: 1.1;
  --ts-leading-normal: 1.4;
  --ts-leading-relaxed: 1.6;
  
  /* Font weights */
  --ts-weight-normal: 400;
  --ts-weight-medium: 500;
  --ts-weight-semibold: 600;
  --ts-weight-bold: 700;
  
  /* === TRANSITIONS === */
  --ts-transition-fast: 0.15s ease;
  --ts-transition-base: 0.2s ease;
  --ts-transition-slow: 0.3s ease;
  
  /* === Z-INDEX === */
  --ts-z-base: 1;
  --ts-z-dropdown: 10;
  --ts-z-sticky: 20;
  --ts-z-modal: 50;
  --ts-z-tooltip: 100;
  
  /* === BACKDROP === */
  --ts-backdrop-blur: blur(16px);
  --ts-backdrop-blur-sm: blur(8px);

  /* === LAYOUT === */
  --page-max-width: 1200px;
  --page-gutter: clamp(18px, 4vw, 48px);
}

/* === DARK MODE (default) === */
/* These tokens are already dark-mode optimized */
/* If you add a light mode later, override these values */

  /* === COMPONENT TOKENS === */
  /* Buttons */
  --ts-btn-padding-y: 0.6rem;
  --ts-btn-padding-x: 1.4rem;
  --ts-btn-radius: var(--ts-radius-full);
  --ts-btn-font-size: var(--ts-font-sm);
  --ts-btn-font-weight: var(--ts-weight-medium);

  /* Cards/Panels */
  --ts-card-padding: var(--ts-spacing-lg);
  --ts-card-radius: var(--ts-radius-md);
  --ts-card-bg: var(--ts-bg-panel);
  --ts-card-border: 1px solid var(--ts-border-primary);
  --ts-card-shadow: var(--ts-shadow-md);

  /* Inputs */
  --ts-input-padding-y: 0.75rem;
  --ts-input-padding-x: 1rem;
  --ts-input-radius: var(--ts-radius-sm);
  --ts-input-border: 1px solid var(--ts-border-primary);
  --ts-input-bg: rgba(255, 255, 255, 0.04);
  --ts-input-focus-border: var(--ts-accent-blue);
}