/* public/themes/modern-white/assets/css/tokens.css
   Tokens CSS: Studium 360 (final, rem-first, compatible)
   - Mantiene nombres existentes (no rompe nada)
   - Agrega tokens nuevos para blocks v3 (section/columns/container)
*/

:root{
  /* ==========================================================================
     Base color system (sin cambios de nombres)
     ========================================================================== */
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #5b667a;
  --border: #e7ebf3;
  --primary: #0c79df;

  /* Surfaces (se quedan igual) */
  --surface: #ffffff;   /* cards/panels */
  --surface-2: #fafafe; /* panel suave */
  --border-2: #dbe3f2;  /* borde un poco más marcado */

  /* ==========================================================================
     Typography
     - Rem first (asume base 16px)
     - Conserva tokens existentes
     ========================================================================== */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";

  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2.125rem;  /* 34px */
  --text-hero: 3.25rem;  /* 52px */

  /* Línea base */
  --line-base: 1.55;
  --line-tight: 1.15;

  /* ==========================================================================
     Spacing scale (rem)
     - Mismos nombres, equivalencias exactas
     ========================================================================== */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 0.75rem;  /* 12px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px */

  /* ==========================================================================
     Radius (rem)
     - Mantiene los 3 existentes y agrega extras para blocks v3
     ========================================================================== */
  --radius-sm: 0.625rem; /* 10px */
  --radius-md: 1rem;     /* 16px */
  --radius-lg: 1.5rem;   /* 24px */

  /* Nuevos (opcionales, no rompen nada) */
  --radius-xl: 2rem;
  --radius-2xl: 2.5rem;

  /* ==========================================================================
     Shadows (se quedan en px; son detalles ópticos)
     ========================================================================== */
  --shadow-sm: 0 6px 24px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(15,23,42,.08);

  /* ==========================================================================
     Layout / container
     - Mantiene --container, pero en rem
     - Agrega tokens para gutters y max widths (opcionales)
     ========================================================================== */
  --container: 70rem; /* 1120px */

  /* gutters: útiles para container/section (opcionales) */
  --gutter-x: clamp(var(--space-3), 3vw, var(--space-4));
  --gutter-y: clamp(var(--space-4), 4vw, var(--space-6));

  /* ==========================================================================
     Block system helpers (v3)
     - Tokens nuevos: no rompen nada, solo ayudan a estandarizar
     ========================================================================== */

  /* Section: padding presets */
  --sec-pad-none: 0;
  --sec-pad-xs: var(--space-1);
  --sec-pad-sm: var(--space-2);
  --sec-pad-md: var(--space-3);
  --sec-pad-lg: var(--space-4);
  --sec-pad-xl: var(--space-5);
  --sec-pad-2xl: var(--space-6);

  /* Section: gap presets (entre items) */
  --sec-gap-xs: var(--space-1);
  --sec-gap-sm: var(--space-2);
  --sec-gap-md: var(--space-3);
  --sec-gap-lg: var(--space-4);
  --sec-gap-xl: var(--space-5);
  --sec-gap-2xl: var(--space-6);

  /* Section: radius presets (para mapear none/sm/md/lg/xl/2xl) */
  --sec-radius-none: 0;
  --sec-radius-sm: var(--radius-sm);
  --sec-radius-md: var(--radius-md);
  --sec-radius-lg: var(--radius-lg);
  --sec-radius-xl: var(--radius-xl);
  --sec-radius-2xl: var(--radius-2xl);

  /* Columns: gap (entre columnas) */
  --cols-gap-sm: var(--space-2);
  --cols-gap-md: var(--space-3);
  --cols-gap-lg: var(--space-4);

  /* Container v3 (futuro): max widths comunes */
  --mw-sm: 40rem;  /* ~640px */
  --mw-md: 52rem;  /* ~832px */
  --mw-lg: 64rem;  /* ~1024px */
  --mw-xl: 70rem;  /* ~1120px (igual a container) */
  --mw-full: 100%;

 
  /* ==========================================================================
     Tone tokens (soft, modern-white)
     - fondos muy suaves (casi gris)
     - bordes sutiles (un poco más marcados)
     ========================================================================== */

  --tone-info-bg: rgba(37,99,235,.06);
  --tone-info-border: rgba(37,99,235,.18);

  --tone-success-bg: rgba(34,197,94,.06);
  --tone-success-border: rgba(34,197,94,.18);

  --tone-warning-bg: rgba(245,158,11,.08);
  --tone-warning-border: rgba(245,158,11,.22);

  --tone-danger-bg: rgba(239,68,68,.06);
  --tone-danger-border: rgba(239,68,68,.18);

  --tone-accent-bg: rgba(99,102,241,.07);
  --tone-accent-border: rgba(99,102,241,.20);

  /* ============================================================ */
  /* Tone text colors: contraste suficiente para textos y títulos */
  /* ============================================================ */
   --tone-info-text: #118bc4;
   --tone-success-text: #009632;
   --tone-warning-text: #d88811;
   --tone-danger-text: #d60000;
   --tone-accent-text: #09599b;

}