/* ==========================================================================
   Design Tokens - EscalaDeNotas (Educator SaaS Clean Architecture)
   ========================================================================== */

:root {
  /* Escala de Fuente Accesible */
  --font-scale: 1;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Tipografías proporcionales */
  --text-xs: calc(0.75rem * var(--font-scale));   /* 12px */
  --text-sm: calc(0.875rem * var(--font-scale));  /* 14px */
  --text-base: calc(1rem * var(--font-scale));    /* 16px */
  --text-md: calc(1.125rem * var(--font-scale));  /* 18px */
  --text-lg: calc(1.25rem * var(--font-scale));   /* 20px */
  --text-xl: calc(1.5rem * var(--font-scale));    /* 24px */
  --text-2xl: calc(1.875rem * var(--font-scale)); /* 30px */
  --text-3xl: calc(2.25rem * var(--font-scale));  /* 36px */
  --text-4xl: calc(3rem * var(--font-scale));     /* 48px */

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

  /* Bordes & Radios */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* ==========================================================================
     TEMA CLARO (SaaS Clean Slate / High Contrast)
     ========================================================================== */
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f1f5f9;
  --bg-subtle: #e2e8f0;
  
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  
  --border-main: #e2e8f0;
  --border-subtle: #cbd5e1;
  --border-focus: #2563eb;
  
  --brand-primary: #0f172a;
  --brand-accent: #2563eb;
  --brand-accent-hover: #1d4ed8;
  --brand-accent-subtle: #eff6ff;
  
  /* Calificaciones y Estados */
  --pass-bg: #f0fdf4;
  --pass-border: #bbf7d0;
  --pass-text: #166534;
  --pass-badge-bg: #dcfce7;
  
  --fail-bg: #fef2f2;
  --fail-border: #fecaca;
  --fail-text: #991b1b;
  --fail-badge-bg: #fee2e2;

  --cutoff-border: #2563eb;
  --cutoff-bg: #f8fafc;
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   TEMA OSCURO (SaaS Slate / Zinc Pro)
   ========================================================================== */
:root[data-theme="dark"] {
  --bg-page: #0b0f19;
  --bg-surface: #111827;
  --bg-surface-alt: #1f2937;
  --bg-subtle: #374151;
  
  --text-main: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-inverse: #111827;
  
  --border-main: #1f2937;
  --border-subtle: #374151;
  --border-focus: #3b82f6;
  
  --brand-primary: #f9fafb;
  --brand-accent: #3b82f6;
  --brand-accent-hover: #60a5fa;
  --brand-accent-subtle: #1e293b;
  
  --pass-bg: #064e3b20;
  --pass-border: #065f46;
  --pass-text: #6ee7b7;
  --pass-badge-bg: #064e3b60;
  
  --fail-bg: #7f1d1d20;
  --fail-border: #991b1b;
  --fail-text: #fca5a5;
  --fail-badge-bg: #7f1d1d60;

  --cutoff-border: #3b82f6;
  --cutoff-bg: #1e293b;
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Niveles de Zoom */
:root[data-font-size="sm"] { --font-scale: 0.90; }
:root[data-font-size="md"] { --font-scale: 1.00; }
:root[data-font-size="lg"] { --font-scale: 1.15; }
:root[data-font-size="xl"] { --font-scale: 1.30; }