/* ============================================================
   OTTO DESIGN TOKENS
   Cambiá aquí y afecta todo el producto.
   ============================================================ */

:root {
  /* ── Tipografía ─────────────────────────────────────── */
  --font-family:   'Readex Pro', sans-serif;
  --fw-light:      300;
  --fw-normal:     400;
  --fw-medium:     500;
  --fw-bold:       700;

  --font-size-md:  16px;   /* base (usado en html{}) */
  --fs-xs:         11px;
  --fs-sm:         12px;
  --fs-base:       13px;
  --fs-md:         14px;
  --fs-lg:         16px;
  --fs-xl:         18px;
  --fs-2xl:        22px;
  --fs-3xl:        28px;
  --fs-4xl:        36px;
  --fs-hero:       64px;

  /* ── Colores base ───────────────────────────────────── */
  /*
    Filosofía: oscuro puro con un toque violeta-medianoche.
    El fondo no es gris neutro sino que lleva el ADN de Otto
    sin invadir —la saturación entra solo en los elementos
    interactivos y de marca.
  */
  --color-bg:            #1B1826;   /* fondo principal — casi negro, toque violeta */
  --color-bg-2:          #141120;   /* fondo secundario — listas, secciones */
  --color-bg-3:          #0D0B18;   /* fondo más oscuro — confirm, modales */
  --color-bg-card:       #272042;   /* botones / cards / opciones interactivas */
  --color-bg-card-2:     #1E1932;   /* cards auth / settings */
  --color-border:        #3C3260;   /* bordes principales */
  --color-border-2:      #261E40;   /* bordes sutiles */
  --color-modal:         #C4B8E8;   /* elemento modal readyforclass */

  /* ── Texto ──────────────────────────────────────────── */
  --color-text-primary:  #EDE8FC;   /* texto principal — blanco cálido-violeta */
  --color-text-muted:    #9280C8;   /* texto secundario — violeta-gris suave */
  --color-text-dark:     #0D0B18;   /* texto sobre fondos claros */

  /* ── Feedback ───────────────────────────────────────── */
  --color-success:       #26D463;   /* verde — respuestas correctas, racha */
  --color-error:         #F24444;   /* rojo — respuestas incorrectas */
  --color-warning:       #F0A500;   /* naranja — advertencias */
  --color-info:          #5AB4D9;   /* azul — información */

  /* ── Marca — Otto ───────────────────────────────────── */
  --color-brand:         #A05CF0;   /* violeta Otto — el pulpo */
  --color-brand-light:   #C28FF7;   /* violeta claro — hover / énfasis */
  --color-brand-dim:     #251844;   /* fondo tintado marca — selección sutil */

  /* ── XP / Logros ────────────────────────────────────── */
  --color-xp:            #FDD222;   /* dorado XP — fondo original del pulpo */
  --color-xp-dim:        #3A2B06;   /* fondo tintado XP */

  /* ── Pro ────────────────────────────────────────────── */
  --color-pro:           #4DDEC9;   /* teal — diferencia del violeta de marca */

  /* ── Spacing (escala 4pt) ───────────────────────────── */
  --sp-1:   4px;
  --sp-2:   6px;
  --sp-3:   8px;
  --sp-4:  11px;
  --sp-5:  14px;
  --sp-6:  18px;
  --sp-7:  24px;
  --sp-8:  28px;
  --sp-9:  32px;
  --sp-10: 36px;
  --sp-11: 42px;

  /* ── Border radius ──────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:  11px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 42px;
  --r-full: 100px;
  --r-pill: 999px;
  --r-circle: 200px;

  /* ── Sombras ────────────────────────────────────────── */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,.5);
  --shadow-card: 7px 7px 0 rgba(0,0,0,.4);

  /* ── Transiciones ───────────────────────────────────── */
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --t-fast:     .15s;
  --t-normal:   .25s;
  --t-slow:     .35s;

  /* ── Tamaños app ────────────────────────────────────── */
  --app-width:   390px;
  --topbar-h:    72px;
  --navbar-h:    70px;
  --actbar-h:    80px;
}