/* ============================================================
   Codia · Sistema de diseño
   Dirección C — «Moderno», tercera versión.

   Qué cambió respecto de la anterior (editorial, tinta + un azul)
   y por qué:
   · Paleta vibrante: violeta como color de marca, cian como
     acento secundario, rosa para momentos puntuales. El azul
     de tinta único se sentía demasiado sobrio para lo que se
     pidió: "moderniza el sitio, con colores".
   · Tipografía sans en todo: Space Grotesk en titulares, Inter
     en texto, JetBrains Mono en etiquetas. Se deja el serif
     editorial (Newsreader) atrás.
   · Esquinas redondeadas y sombras con color, en vez de líneas
     finas y esquinas a 90°: es el lenguaje visual que se pidió
     ("moderno", en el sentido de SaaS actual).
   · Gradiente de marca (violeta → magenta) para las bandas
     oscuras y los botones principales.

   Todo se cambia acá. No pongas colores sueltos en los otros
   archivos CSS o el modo oscuro deja de funcionar.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Superficies claras ---------------------------------- */
  --paper:        #F8F7FD;  /* fondo de la página */
  --surface:      #FFFFFF;  /* placas y tarjetas */
  --surface-2:    #EFECFC;  /* bloques hundidos */
  --ink:          #150F2E;  /* texto principal */
  --ink-2:        #5B5478;  /* texto secundario */
  --ink-3:        #918AAE;  /* etiquetas y notas */
  --rule:         #E3DFF5;  /* líneas divisorias */
  --rule-strong:  #C7BFEA;  /* líneas de encabezado */

  /* ---- Marca: violeta + cian + rosa -------------------------- */
  --accent:       #6D5EF5;
  --accent-2:     #5646E0;
  --accent-soft:  #ECE9FF;
  --on-accent:    #FFFFFF;
  --secondary:    #14B8C4;
  --tertiary:     #FB6F92;

  --gradient-brand: linear-gradient(135deg, #6D5EF5 0%, #8B5CF6 45%, #EC4899 100%);
  --gradient-field: linear-gradient(160deg, #1D1250 0%, #120B33 55%, #0A0618 100%);

  /* ---- Campo oscuro ------------------------------------------
     Las bandas a sangre completa (encabezado, portada, cierre)
     usan estos valores. */
  --field:        #120B33;
  --field-2:      #1D1250;
  --field-rule:   #33245E;
  --on-field:     #FFFFFF;
  --on-field-2:   #C6BEEE;
  --field-accent: #5EEAD4;

  /* ---- Señales --------------------------------------------- */
  --ok:         #16A34A;
  --alert:      #E11D48;

  /* ---- Sombras con color -------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(30, 15, 70, .07);
  --shadow-md: 0 14px 32px rgba(76, 29, 149, .16);
  --shadow-glow: 0 18px 44px rgba(109, 94, 245, .30);

  /* ---- Tipografía ------------------------------------------ */
  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", Consolas, ui-monospace, monospace;

  /* ---- Escala ------------------------------------------------ */
  --t-xs:   0.6875rem;   /* 11px — etiquetas mono */
  --t-sm:   0.8125rem;   /* 13px — notas */
  --t-base: 0.9375rem;   /* 15px — interfaz */
  --t-md:   1.0625rem;   /* 17px — lectura */
  --t-lg:   1.3125rem;   /* 21px — bajadas */
  --t-xl:   clamp(1.375rem, 2.4vw, 1.875rem);
  --t-2xl:  clamp(2rem, 4.2vw, 3.25rem);
  --t-3xl:  clamp(2.75rem, 7.4vw, 5.25rem);
  --t-folio: clamp(2.25rem, 3.6vw, 3.25rem);

  /* ---- Espaciado ------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 72px;
  --s-9: 104px; --s-10: 144px;

  /* ---- Medidas --------------------------------------------- */
  --measure: 60ch;
  --wide:    1240px;
  --narrow:  760px;

  /* ---- Esquinas: redondeadas, al estilo SaaS actual --------- */
  --radius:    20px;
  --radius-sm: 12px;
}

/* ---- Modo oscuro por preferencia del sistema --------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:        #0B0716;
    --surface:      #150F2E;
    --surface-2:    #1D1444;
    --ink:          #F3F1FF;
    --ink-2:        #B7AEDC;
    --ink-3:        #7E76A3;
    --rule:         #2B2050;
    --rule-strong:  #3D2E6E;

    --accent:       #A78BFA;
    --accent-2:     #C4B5FD;
    --accent-soft:  #241A4A;
    --on-accent:    #150F2E;
    --secondary:    #2DD4BF;
    --tertiary:     #FB7185;

    --field:        #1B1248;
    --field-2:      #241A5C;
    --field-rule:   #382A6B;
    --on-field:     #FFFFFF;
    --on-field-2:   #C6BEEE;
    --field-accent: #5EEAD4;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-md: 0 14px 32px rgba(0, 0, 0, .45);
    --shadow-glow: 0 18px 44px rgba(167, 139, 250, .35);

    --ok:    #4ADE80;
    --alert: #FB7185;
  }
}

/* ---- Modo oscuro elegido a mano ---------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #0B0716;
  --surface:      #150F2E;
  --surface-2:    #1D1444;
  --ink:          #F3F1FF;
  --ink-2:        #B7AEDC;
  --ink-3:        #7E76A3;
  --rule:         #2B2050;
  --rule-strong:  #3D2E6E;

  --accent:       #A78BFA;
  --accent-2:     #C4B5FD;
  --accent-soft:  #241A4A;
  --on-accent:    #150F2E;
  --secondary:    #2DD4BF;
  --tertiary:     #FB7185;

  --field:        #1B1248;
  --field-2:      #241A5C;
  --field-rule:   #382A6B;
  --on-field:     #FFFFFF;
  --on-field-2:   #C6BEEE;
  --field-accent: #5EEAD4;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, .45);
  --shadow-glow: 0 18px 44px rgba(167, 139, 250, .35);

  --ok:    #4ADE80;
  --alert: #FB7185;
}