/*
 * Design Tokens — single source of truth for colors, spacing, radii, shadows
 */

:root {
  /* === Colors === */
  --app-brand: #5b7cff;
  --app-brand-end: #4766e6;
  --app-brand-soft: rgba(76, 110, 245, 0.08);
  --app-brand-glow: rgba(76, 110, 245, 0.12);
  --app-brand-gradient: linear-gradient(180deg, var(--app-brand) 0%, var(--app-brand-end) 100%);

  --app-bg-start: #edf2f7;
  --app-bg-mid: #f5f7fb;
  --app-bg-end: #ebeff6;

  --app-surface: rgba(255, 255, 255, 0.96);
  --app-surface-strong: #ffffff;
  --app-surface-muted: #f8fafc;

  --app-border: rgba(215, 224, 236, 0.98);
  --app-border-hover: #c9d4e2;

  --app-text: #1a1a2e;
  --app-heading: #111827;
  --app-body: #374151;
  --app-muted: #6b7280;
  --app-hint: #9ca3af;

  --app-success: #5a8f7f;
  --app-success-soft: rgba(90, 143, 127, 0.14);
  --app-warning: #d5b674;
  --app-warning-soft: rgba(213, 182, 116, 0.14);
  --app-danger: #cb6d76;
  --app-danger-end: #b4525c;
  --app-danger-gradient: linear-gradient(180deg, var(--app-danger) 0%, var(--app-danger-end) 100%);

  /* === Border Radius === */
  --app-radius-sm: 8px;
  --app-radius: 12px;
  --app-radius-lg: 16px;
  --app-radius-xl: 20px;
  --app-radius-2xl: 24px;
  --app-radius-3xl: 28px;

  /* === Shadows === */
  --app-shadow: 0 24px 48px -26px rgba(15, 23, 42, 0.22);
  --app-shadow-soft: 0 20px 40px -28px rgba(15, 23, 42, 0.18);
  --app-shadow-btn: 0 14px 24px -18px rgba(76, 110, 245, 0.5);
  --app-shadow-card: 0 16px 28px -24px rgba(15, 23, 42, 0.14);

  /* === Spacing === */
  --app-space-xs: 4px;
  --app-space-sm: 8px;
  --app-space: 12px;
  --app-space-md: 16px;
  --app-space-lg: 24px;
  --app-space-xl: 32px;
  --app-space-2xl: 40px;

  /* === Typography === */
  --app-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --app-font-size-xs: 12px;
  --app-font-size-sm: 13px;
  --app-font-size: 14px;
  --app-font-size-md: 15px;
  --app-font-size-lg: 18px;
  --app-font-size-xl: 22px;
  --app-font-size-2xl: 26px;
  --app-font-size-3xl: 34px;

  /* === Transitions === */
  --app-transition-fast: 0.12s ease;
  --app-transition: 0.2s ease;
  --app-transition-slow: 0.3s ease;

  /* === Page Background === */
  --app-page-bg:
    radial-gradient(circle at top left, rgba(76, 110, 245, 0.1), transparent 28%),
    radial-gradient(circle at bottom right, rgba(100, 116, 139, 0.1), transparent 24%),
    linear-gradient(180deg, var(--app-bg-start) 0%, var(--app-bg-mid) 48%, var(--app-bg-end) 100%);
}