/* Design tokens — claro: teal → navy. Oscuro: negro predominante + botones claros (paleta clara invertida) */

:root {
  color-scheme: light;

  /* Color — light mode (teal → navy) */
  --color-bg-primary: #F3FBFA;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #E3F6F5;
  --color-bg-inverse: #2A2F63;

  --color-text-primary: #2A2F63;
  --color-text-secondary: #3E6D9C;
  --color-text-tertiary: #6E93B8;
  --color-text-inverse: #E3F6F5;
  --color-text-link: #3E6D9C;

  --color-border-primary: #A7E0DB;
  --color-border-secondary: #CFEFEC;
  --color-border-focus: #3E6D9C;

  --color-accent-primary: #3E6D9C;
  --color-accent-primary-hover: #355D85;
  --color-accent-primary-active: #2C4D6E;
  --color-accent-secondary: #5FB0C9;
  --color-on-accent: #FFFFFF;

  --color-status-success: #3F9464;
  --color-status-warning: #C08A2E;
  --color-status-error: #C6495B;
  --color-status-info: #5FB0C9;

  --color-surface-overlay: rgba(42, 47, 99, 0.35);

  /* Spacing — base 8px */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;

  /* Typography */
  --font-family-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-family-body: 'Nunito Sans', 'Segoe UI', sans-serif;

  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-wide: 0.04em;

  /* Layout */
  --max-width-page: 1080px;

  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 47, 99, 0.08);
  --shadow-md: 0 4px 16px rgba(42, 47, 99, 0.12);
  --shadow-lg: 0 12px 32px rgba(42, 47, 99, 0.16);
  --shadow-focus: 0 0 0 3px rgba(62, 109, 156, 0.25);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Color — dark mode: paleta clara invertida (negro predominante, acentos claros) */
  --color-bg-primary: #05060E;
  --color-bg-secondary: #0D1030;
  --color-bg-tertiary: #171B45;
  --color-bg-inverse: #E3F6F5;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A7E0DB;
  --color-text-tertiary: #6B96A3;
  --color-text-inverse: #05060E;
  --color-text-link: #5FB0C9;

  --color-border-primary: #2A2F63;
  --color-border-secondary: #171B45;
  --color-border-focus: #A7E0DB;

  --color-accent-primary: #A7E0DB;
  --color-accent-primary-hover: #C3E9E5;
  --color-accent-primary-active: #8FCFC7;
  --color-accent-secondary: #5FB0C9;
  --color-on-accent: #05060E;

  --color-status-success: #4FAE7A;
  --color-status-warning: #D9A73B;
  --color-status-error: #E0566B;
  --color-status-info: #5FB0C9;

  --color-surface-overlay: rgba(0, 0, 0, 0.75);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(167, 224, 219, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg-primary: #05060E;
    --color-bg-secondary: #0D1030;
    --color-bg-tertiary: #171B45;
    --color-bg-inverse: #E3F6F5;

    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A7E0DB;
    --color-text-tertiary: #6B96A3;
    --color-text-inverse: #05060E;
    --color-text-link: #5FB0C9;

    --color-border-primary: #2A2F63;
    --color-border-secondary: #171B45;
    --color-border-focus: #A7E0DB;

    --color-accent-primary: #A7E0DB;
    --color-accent-primary-hover: #C3E9E5;
    --color-accent-primary-active: #8FCFC7;
    --color-accent-secondary: #5FB0C9;
    --color-on-accent: #05060E;

    --color-status-success: #4FAE7A;
    --color-status-warning: #D9A73B;
    --color-status-error: #E0566B;
    --color-status-info: #5FB0C9;

    --color-surface-overlay: rgba(0, 0, 0, 0.75);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(167, 224, 219, 0.35);
  }
}