/* theme.css
   Un solo sitio donde vive el color. Todo lo demas lo referencia, asi que
   cambiar la marca es cambiar este archivo y nada mas.

   Las variables se definen dos veces: claro por defecto y oscuro cuando el
   sistema lo pide. Ningun componente decide su color por su cuenta. */

:root {
  color-scheme: light dark;

  /* Claro: marmol blanco y lineas plateadas. Tinta grafito, sin color de
     marca: lo que destaca es el contraste, no un tono. */

  /* superficies, de la mas al fondo a la mas cercana */
  --bg:        #f4f3f0;
  --bg-image:  radial-gradient(1100px 560px at 8% -12%, #ffffff 0%, rgba(255,255,255,0) 62%),
               radial-gradient(900px 520px at 108% 6%, #ebe9e4 0%, rgba(235,233,228,0) 58%),
               radial-gradient(700px 420px at 50% 115%, #eeedea 0%, rgba(238,237,234,0) 60%);
  --surface:   #ffffff;
  --surface-2: #f5f5f3;
  --line:      #d9dbde;
  --line-soft: #e9eaec;
  --silver:    linear-gradient(90deg, rgba(201,205,210,0), #c9cdd2 18%, #f2f3f4 50%, #c3c7cc 82%, rgba(195,199,204,0));

  /* texto */
  --ink:       #16181b;
  --ink-2:     #5d6269;
  --ink-3:     #8f949b;

  /* acento: grafito, con fondos y bordes plateados */
  --accent:    #24282e;
  --accent-in: #ffffff;
  --accent-bg: #edeef0;
  --accent-ln: #c5cad0;

  /* estados, apagados para que no parezcan una marca */
  --ok:        #3b6a52;
  --warn:      #8a6a1f;
  --warn-bg:   #faf7ee;
  --warn-ln:   #e2d5b2;
  --stop:      #9b3b33;

  /* forma */
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --gap:  11px;
  --shadow: 0 1px 2px rgba(22, 24, 27, .05), 0 8px 24px rgba(22, 24, 27, .06);

  /* tipografia */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --fs-body: 14.5px;
  --fs-small: 12.5px;
  --fs-micro: 11.5px;
}

/* Tres estados: automatico (sigue al sistema), claro y oscuro.
   El automatico no basta: si el sistema esta en claro no hay forma de ver el
   modo oscuro ni de comprobarlo. El elegido se guarda en el perfil. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-image:  none;
    --silver:    linear-gradient(90deg, rgba(90,98,96,0), #3a4341 30%, #56605d 50%, #3a4341 70%, rgba(90,98,96,0));
    --bg:        #0e1211;
    --surface:   #161b1a;
    --surface-2: #1c2221;
    --line:      #272f2d;
    --line-soft: #202726;

    --ink:       #e7ecea;
    --ink-2:     #9aa5a1;
    --ink-3:     #6f7a76;

    --accent:    #4fc3a1;
    --accent-in: #08110e;
    --accent-bg: #16302a;
    --accent-ln: #234b41;

    --ok:        #57c98b;
    --warn:      #d9ab54;
    --warn-bg:   #241f12;
    --warn-ln:   #4a3c1c;
    --stop:      #e0766a;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
    --bg-image:  none;
    --silver:    linear-gradient(90deg, rgba(90,98,96,0), #3a4341 30%, #56605d 50%, #3a4341 70%, rgba(90,98,96,0));
    --bg:        #0e1211;
    --surface:   #161b1a;
    --surface-2: #1c2221;
    --line:      #272f2d;
    --line-soft: #202726;

    --ink:       #e7ecea;
    --ink-2:     #9aa5a1;
    --ink-3:     #6f7a76;

    --accent:    #4fc3a1;
    --accent-in: #08110e;
    --accent-bg: #16302a;
    --accent-ln: #234b41;

    --ok:        #57c98b;
    --warn:      #d9ab54;
    --warn-bg:   #241f12;
    --warn-ln:   #4a3c1c;
    --stop:      #e0766a;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }

/* ---- primitivas compartidas ---- */

body {
  font: var(--fs-body)/1.55 var(--font);
  background: var(--bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 20px; font-weight: 640; letter-spacing: -.01em; margin: 0 0 4px }
h2 { font-size: 15px; font-weight: 620; margin: 0 0 8px }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-ln) }
a:hover { border-bottom-color: var(--accent) }

label { font-size: var(--fs-small); font-weight: 600; letter-spacing: .005em }

.hint { font-size: var(--fs-micro); color: var(--ink-2); font-weight: 400; line-height: 1.45 }
.opt  { font-size: 10.5px; font-weight: 500; color: var(--ink-3);
        text-transform: uppercase; letter-spacing: .06em }

input, textarea, select {
  font: var(--fs-body) var(--font);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, textarea:hover { border-color: var(--ink-3) }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
input::placeholder, textarea::placeholder { color: var(--ink-3) }

input.guess { border-color: var(--warn-ln); background: var(--warn-bg) }

button {
  font: 600 var(--fs-small) var(--font);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-in) }
.btn-primary:hover { opacity: .9 }
.btn-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-quiet:hover { border-color: var(--ink-3); background: var(--surface-2) }
.btn-ghost {
  background: transparent; color: var(--accent);
  border: 1px dashed var(--accent-ln); font-weight: 600;
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-bg) }
.btn-icon {
  background: transparent; border: none; color: var(--ink-3);
  font-size: 17px; line-height: 1; padding: 0 5px;
}
.btn-icon:hover { color: var(--stop) }