/* ============================================================================
   ExpedienteGine — Design Tokens
   Fuente base para tipografia, escala, radios, sombras y aliases semanticos.
   Los colores por tema viven en themes.css.
   ============================================================================ */

:root {
  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 24px rgba(23, 46, 97, .06);
  --shadow-card: 0 4px 14px rgba(23, 46, 97, .05);
  --shadow-elevated: 0 14px 36px rgba(23, 46, 97, .10);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

body, [data-theme] {
  --color-primary: var(--color-navy);
  --color-background: var(--color-bg-primary);
  --color-text: var(--color-text-primary);
  --color-sage: var(--color-olive);
  --color-background-card: var(--color-surface);
  --color-bg-subtle: var(--color-bg-secondary);
  --color-text-muted: var(--color-text-secondary);
  --color-text-title: var(--color-text-primary);
  --color-primary-light: var(--color-accent-soft);
  --color-success-soft: var(--color-secondary-soft);
  --color-warning-soft: #FFF6E6;
  --color-error-soft: #FDECEA;
  --border-soft: 1px solid var(--color-border);
  --color-input-bg: var(--color-surface);
  --color-input-border: var(--color-border);

  --ios-bg-grouped: var(--color-bg-secondary);
  --ios-bg-card: var(--color-surface);
  --ios-red: var(--color-error);
  --ios-blue: var(--color-primary);
  --primary-color: var(--color-primary);
  --border-color: var(--color-border);
  --text-color: var(--color-text-primary);
}