/*
 * Central design token source for myDraft SaaS styling.
 * This file defines the foundational variables used across the theme and is
 * intentionally kept as the single source of truth for colors, spacing,
 * radii, typography, motion, and shadows.
 */
:root {
  /* Base palette */
  --ts-color-bg: var(--color-primary, #0f172a);
  --ts-color-bg-alt: var(--color-primary-mid, #1e293b);
  --ts-color-surface: var(--color-surface-card, rgba(15, 23, 42, 0.85));
  --ts-color-surface-strong: var(--color-surface-elevated, #111827);
  --ts-color-surface-soft: var(--color-surface, #0f172a);
  --ts-color-border: var(--color-border, rgba(148, 163, 184, 0.32));
  --ts-color-text: var(--color-text, #f8fafc);
  --ts-color-text-muted: var(--color-text-muted, #cbd5e1);
  --ts-color-text-soft: var(--color-text-soft, #94a3b8);

  --ts-color-brand: var(--color-accent, #0284c7);
  --ts-color-brand-strong: var(--color-accent-hover, #0369a1);
  --ts-color-brand-soft: var(--color-accent-dim, rgba(2, 132, 199, 0.14));
  --ts-color-success: var(--color-green, #10b981);
  --ts-color-warning: var(--color-orange, #f59e0b);
  --ts-color-danger: var(--color-red, #ef4444);

  /* Spacing */
  --ts-space-1: 0.25rem;
  --ts-space-2: 0.5rem;
  --ts-space-3: 0.75rem;
  --ts-space-4: 1rem;
  --ts-space-5: 1.25rem;
  --ts-space-6: 1.5rem;
  --ts-space-8: 2rem;
  --ts-space-10: 2.5rem;
  --ts-space-12: 3rem;
  --ts-space-16: 4rem;

  /* Radius */
  --ts-radius-sm: 0.375rem;
  --ts-radius-md: 0.75rem;
  --ts-radius-lg: 1rem;
  --ts-radius-xl: 1.5rem;
  --ts-radius-pill: 999px;

  /* Typography */
  --ts-font-sans: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --ts-font-heading: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --ts-font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

  --ts-text-xs: 0.75rem;
  --ts-text-sm: 0.875rem;
  --ts-text-md: 1rem;
  --ts-text-lg: 1.125rem;
  --ts-text-xl: 1.5rem;
  --ts-text-2xl: 2rem;
  --ts-text-3xl: clamp(2.25rem, 4vw, 3.5rem);

  /* Sizing */
  --ts-content-max-width: 1200px;
  --ts-card-padding: var(--ts-space-5);
  --ts-hero-padding: clamp(var(--ts-space-6), 4vw, var(--ts-space-12));

  /* Responsive / mobile first */
  --ts-breakpoint-sm: 575.98px;
  --ts-breakpoint-md: 767.98px;
  --ts-breakpoint-lg: 992px;
  --ts-touch-target-min: 44px;
  --ts-touch-target-min-mobile: 48px;
  --ts-dock-height: 64px;
  --ts-dock-safe: env(safe-area-inset-bottom, 0px);

  /* Shadows */
  --ts-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.18);
  --ts-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.22);
  --ts-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.28);
  --ts-shadow-brand: 0 10px 24px rgba(2, 132, 199, 0.28);

  /* Motion */
  --ts-transition-fast: 150ms ease;
  --ts-transition-base: 240ms ease;
  --ts-transition-slow: 360ms ease;

  /* Focus */
  --ts-focus-ring: 0 0 0 2px rgba(2, 132, 199, 0.35);
}

[data-theme="light"],
[data-bs-theme="light"],
html.light,
body.light {
  --ts-color-bg: var(--color-surface, #ffffff);
  --ts-color-bg-alt: #f8fafc;
  --ts-color-surface: rgba(255, 255, 255, 0.9);
  --ts-color-surface-strong: #ffffff;
  --ts-color-surface-soft: #f8fafc;
  --ts-color-border: rgba(148, 163, 184, 0.4);
  --ts-color-text: #0f172a;
  --ts-color-text-muted: #334155;
  --ts-color-text-soft: #475569;
  --ts-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
  --ts-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.12);
  --ts-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.16);
}